根据vue-router路由传参配置keep-alive以及登录校验
这篇文章发布于 2019/11/04,归类于 Vue
标签:
vue 中路由meta,根据路由配置做登录验证,根据vue-router路由传参配置keep-alive
登录校验这块 From vue 中路由meta
在vue开发中,路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。可以用来设置是否使用keep-alive,以及登录校验,先来看看配置
{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false,
iskeepAlive: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true,
iskeepAlive: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
keep-alive 相关前端设置
<keep-alive>
<router-view v-if="$route.meta.iskeepAlive" :key="routeKey">
</keep-alive>
<router-view v-if="!$route.meta.iskeepAlive" :key="routeKey">
页面登录校验时,路由钩子
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})