看了好多动态路由的方法看到头晕，最后还是自己搞了个方法解决。
使用
- addRouter
- 本地存储
- 路由钩子
思路
router/index.js
- 在登录验证通过后，获取权限通过不同权限挂载不同权限的路由。
路由处理
这两个为动态追加的路由路径
// 平台路由
import platform from './0'
//运营路由
import management from './1'
正常的路由路劲
Vue.use(Router)
const router = new Router({
mode: 'hash',
routes:[
{
path: '/',
name: '/',
component: Login,
},
//......写固定路由
过滤空路由
{
path:"*",
component:Login,
}
]
})
只加载一次的 上锁
let off = true;
// 注册全局钩子用来拦截导航
router.beforeEach((to, from, next) => {
// 动态添加路由
if(off){
let routers = []
//这里为读取本地的权限 测试里面只有0，1两个权限
switch (window.sessionStorage.getItem('jurisdiction')) {
case "0":
routers = platform
break;
case "1":
routers = management
break;
default:
break;
}
router.addRoutes(routers)
//锁住
off = false
}
}）
被上面导入的路径代码如下
0.js || 1.js
//设置
const Setup = () => import('@/pages/setup/0/Setup.vue')
export default [
//首页
{
path: '/index',
name: 'Index',
component: Index,
meta: { requiresAuth: true },
},
......
]
搞完这些后发现一个问题，不会加载，需要刷新页面才会出现。当时想了好多原因，不想了直接用了一个蠢办法，登陆成功后刷新一次
// 登陆
login (formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$store.dispatch('toLogin', {
loginUser: this.ruleForm.username,
loginPassword: this.ruleForm.password
}).then(() => {
this.$router.go(0) //登陆成功后刷新一次再去获取信息
this.$store.dispatch('getUser')
......
以下为超纲部分
这样又出了一个问题，刷新后加载出来的页面导航条第一个不会选中。默认进入第一个导航条不选中有点烦。查看数据发现已经挂载了需要触发一次点击事件。然后发现貌似强制触发事件也不行。最后灵机一动写了个自定义指令。
在页面挂载之前
<el-menu
:default-active="activeIndex"
background-color="transparent"
@select="handleSelect"
>
<el-menu-item
@click="routerGo(item[1])"
:key="item[1].index"
v-acti="item[1].index" //自定义指令
v-for="(item,index) in showEnd"
:index="item[1].index"
>
</el-menu-item>
</el-menu>
directives:{
'acti':{
bind(el, binding,vnode){
if(binding.value == 0 && window.sessionStorage.getItem('activeIndex') == null){
el.click()
return
}
if(window.sessionStorage.getItem('activeIndex') == binding.value){
el.click()
}
}
}
},
data(){
return {
//最终挂载的路径
showEnd:null,
jurisdiction:'',
//默认点击的值
activeIndex:"0",
}
},
methods: {
handleSelect(key, keyPath) {
window.sessionStorage.setItem('activeIndex',key)
},
// 切页面
routerGo(item){
this.$router.push(item.path)
}
},
如果页面初始存个点击项感觉这里可以不用。毕竟初始只用第一个
created() {
if(null == window.sessionStorage.getItem('activeIndex')){
window.sessionStorage.setItem('activeIndex',this.activeIndex);
}
},
//加载不同的导航条
mounted() {
this.jurisdiction = window.sessionStorage.getItem('jurisdiction');
let that = this
switch (this.jurisdiction) {
case "0":
that.showEnd = that.showList1
break;
case "1":
that.showEnd = that.showList2
break;
}
},
//监控路由跳转跳转让该页面的导航条处于激活状态
watch: {
$route(to,from){
let path = "/"+(to.path.split("/")[1])
this.showEnd.map(item => {
if(item[1].path == path){
this.activeIndex = item[1].index
}
})
}
},
网友评论