vueX 配合路由导航配置动态路由

1.vueX 主要是全局定义存储数据，方法的位置  通过方法 来改变数据。

2.安装vueX    npm install vuex --save

3. 在新建的store/index.js中 引入文件

     import Vuex from 'vuex'

     Vue.use(Vuex);

4. 在main.js中全局引入  store/index.js 

    import store from './store/index'

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

 

 

导航守卫 就是利用addRouter控制路由权限

1.定义普通路由 和权限路由 普通路由可以随便使用 

import Vue from 'vue'

import Rrouter from 'vue-router'

import index from '@/view/demo/index.vue'

Vue.use(Rrouter)

//普通路由

export const constantRouter = [

  {

    path: '/',

    component: index

  },

  {

    path: "/xys",

    component: () => import('@/view/demo/xys.vue')

  },

]

//带权限的路由 

export const ansyncRouter = [

  {

    path: "/qxly",

    component: () => import('@/view/qxly/qxlyindex.vue')

  },

]

export default new Rrouter({

  routes: constantRouter

});

2.使用权限路由是利用  router的 addRoutes 方法往路由添加 权限路由 

<template>

  <div id="app">

    <div>

      <div>计算属性</div>

      <div>总分值:{{ numlist }}</div>

      <div>

        <router-link to="/xys">跳转</router-link>

      </div>

      <div v-show="$store.state.islogin">

        <router-link to="/qxly">跳转守卫路由</router-link>

      </div>

      <router-link to="/qxly">跳转守卫路由------------没有添加的守卫无法跳转</router-link>

      <div @click="btnchange">权限路由</div>

    </div>

    <div class="tel">

      <div class="dianji" @click="change">蒙版</div>

    </div>

  </div>

</template>

<script>

import { ansyncRouter } from "../../router/index";

export default {

  data() {

    return {

      datalist: [

        { id: 123 },

        { id: 123 },

        { id: 123 },

        { id: 123 },

        { id: 123 },

      ],

      isshow: true,

    };

  },

  computed: {

    numlist() {

      let total = 0;

      for (let tttc of this.datalist) {

        total += tttc.id;

      }

      return total;

    },

  },

  methods: {

    change() {

      console.log(999);

    },

    btnchange() {

      console.log(this.$router);

      this.$store.commit("alogin");

      this.$router.addRoutes(ansyncRouter);

    },

  },

};

</script>

<style>

.tel {

  width: 100px;

  height: 100px;

  background: red;

}

</style>