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>
