翟塘峡口曲江头，万里风烟接素秋。那遍地的绿草，那微风中轻轻摇曳的芦苇，那栖满了夜鹭的灌木丛，就像一幅立体的田园画，静静地展现在我的眼前。
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录
下面的两个页面，登录页不需要检测，首页需要检测
const routers = [
{
path: '/',
component: App,
children: [
{
path: '/login',
component: Login,
meta: {
title: '登录'
}
},
{
path: '/home',
component: Home,
meta: {
title: '首页',
requireAuth: true
}
}
]
}
]
export default routers
2.main.js
返回遍历的某个路由对象，我们定义为record，检测这个对象是否拥有meta这个对象，如果有meta这个对象，检测meta对象是不是有requireAuth这个属性且为true
检测到需要登录权限后，我的做法是请求接口判断用户是否登录
如果未登录，跳转到登录页面；如果已经登录，确保要调用next()方法，否则钩子就不会被resolved
router.beforeEach((to, from, next) => {
/* 页面title */
if (to.meta.title) {
document.title = to.meta.title
}
/* 判断该路由是否需要登录权限 */
if (to.matched.some(record => record.meta.requireAuth)) {
//是否登录
axios.post('/home/user/isLogin')
.then(function (response) {
if (response.data.code == 0) {
//未登录
if (response.data.data.online == 0) {
next({
path: '/login',
})
} else {
//已登录
next()
}
}
})
.catch(function (error) {
// Toast(error.data.msg);
});
}
next();
})
以上就是vue-router判断页面未登录自动跳转到登录页的方法示例。渐渐的知道了，很多东西可遇而不可求，不属于自己的，何必拼了命去在乎。你在意什么，什么就会折磨你。期待是所有心痛的根源。更多关于vue-router判断页面未登录自动跳转到登录页的方法示例请关注haodaima.com其它相关文章！
