router.beforeEach((to, from, next) => {//配置路由守卫
if(to.path==='/'||store.state.user.id){
next()
}else{
next({ path: '/',query: {redirect: to.path}});
}
});
next({ path: "/?redirect=" + to.path});
这种写法出错的情况:当你的身份信息失效,请求一个/employee路径,会到else,然后执行next({ path: “/login?redirect=” + to.path});因为指定path为"/login?redirect=" + to.path的同时没有指定query,router组件不会再解析query参数,也就得不到重定向效果,登陆成功就去了首页而不是/employee页面。
然后定义路由,写el-menu
const routes = [
{
path: '',//一定要写这个,否则会解析到下面的HomeView,不能写'/',好坑的问题,找了很久
name: 'login',
component: LoginView
},
{
component: HomeView,
children: [
{
path: '/home',
name: 'product',
component: BelowStandard
}
]
},
{
component: HomeView,
children: [
{
path: '/employee',
name: 'employee',
component: employeeConfig
}
]
}
]
<el-menu
router
active-text-color="#ffd04b"
background-color="#000"
class="el-menu-vertical-demo"
:default-active="this.$route.path"
text-color="#fff"
@open=""
@close=""
>
<el-menu-item index="/home">
<template #title>
不合格品列表
</template>
</el-menu-item>
<el-sub-menu index="/submeun">
<template #title>
选项设置
</template>
<el-menu-item index="/2-1">部门设置</el-menu-item>
<el-menu-item index="/2-2">系统设置</el-menu-item>
<el-menu-item index="/2-3">超时设置</el-menu-item>
<el-menu-item index="/employee">员工设置</el-menu-item>
</el-sub-menu>
<el-menu-item index="/3">
<span>统计</span>
</el-menu-item>
<el-menu-item index="/4">
<span>日志管理</span>
</el-menu-item>
</el-menu>
/home和/employee分别对应的界面
还有登录逻辑
let path = this.$route.query.redirect
this.$router.push({ path: path===undefined?'/home':path });
重定向参数会在登录的时候拿到,如果没有,就跳转到首页/product