vue是一套用于构建用户界面的渐进式框架

文件目录

main.js 入口文件

import Vue from 'vue';
import App from './App';
import router from '@/router';
import store from '@/store/index';

Vue.config.productionTip = false;

new Vue({
    el: '#app',//挂载节点
    store,//状态管理
    router,//路由
    components: { App },//挂载到App组件
    template: '<App/>'
});

router 路由

import Vue from 'vue';
import Router from 'vue-router';
import routes from './routes_config';

Vue.use(Router);//把Router挂载到vue上

 let router=new Router({
    routes:[{
        path: '/',
        redirect: '/home'
    },
    {
        path: '/home',
        component: () =>
            import ('@/containers/home')
    }]
});
//全局导航守卫
router.beforeEach((to, from, next) => {
    let str = window.localStorage.getItem('user');
    if (str) {
        next();
    } else {
        if (to.path === '/login') {
            next();
        } else {
            next('/login');
        }
    }
});

export default router;

store.js

import Vue from 'vue';
import Vuex from 'vuex';
//日志
import Logger from 'vuex/dist/logger';
//引入子模块
import home from './model/home';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: { home },
    plugins: [Logger()]
});

home 模块

import axios from 'axios';
let gedata=()=>{
      return axios.get("/api/list")
}

//数据
let state = {
    list: []
};
//同步
let mutations = {
    getlist(state, payload) {
        state.list = payload;
    }
};
//异步
let actions = {
    //异步  在页面里mount里请求 拿到数据    
    getlist({ commit }, payload) {
        new Promise((resolve, reject) => {
            //请求数据的函数
            getdata().then(res => {
                commit('getlist', res.data);//调用同步getlist 将数据传过去并赋给list
                resolve();
            });
        });
    }
};
export default {
    namespaced: 'home', //命名空间
    state,
    mutations,
    actions
};

home 页面调用

<template>
 <div class="item"
         v-for="item in list"
         :key="item.id">
 <div class="item-i">
    <h4 @click="detail(item.id)">{{item.name}}</h4>
    <div>价格：{{item.moneny}}</div>
    <div class="count">
      <button @click="count('+',item.id,item.num)">+</button>
      <div v-if="item.num>0">
        <span>{{item.num}}</span>
        <button @click="count('-',item.id,item.num)">-</button>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {  mapState, mapMutations, mapActions} from "vuex";

export default {
  name: "home",
  //获取store里的list
  computed: {
    ...mapState({
      list: state => state.home.list
    })
  },
  methods: {
    //同步
    ...mapMutations({
      Count: "home/count"
    }),
  //异步
    ...mapActions({
      getlist: "home/getlist"
    }),
    //计算
    count(type, id, num) {
      let newnum = num;
      if (type === "+") {
        newnum++;
      } else {
       newnum--;
      }
      this.Count({ id, num: newnum });
    },
    //跳详情
    detail(id) {
      this.$router.push({ name: "detail", params: { id } });
    }
  },
  //请求数据
  mounted() {
    this.getlist();
  }
};
</script>

<style>

</style>

动态路由

路由规则 route[{path:"/detail/:d"}]

1. 声明式路由跳转
   <router-link to="/path路径" tag="标签名"></router-link>

2. 编程式跳转
   1.this.$router.push("/detail");//字符串
   2.this.$router.push({path:"/detail/0"});//对象

3.传递参数的方法

• Params
  由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则 params将无效。需要用name来指定页面。及通过路由配置的name属性访问

• Query
  页面通过path和query传递参数
  4.获取传参
  this. $route.quert.xxx 或 this.$route.params.xxx