Vue-router路由判断页面未登录跳转到登录页面的实例

时间:2021-05-26

如下所示:

router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该路由 }) } } else { next(); }});

在这之前是给路由加一个meta属性:

{ path: '/index', meta: { title: '', requireAuth: true, // 添加该字段,表示进入这个路由是需要登录的 },}

注意:但是事实是登录的时候大多数时候并不进行跳转,所以这里需要在login跳转的路径中再加一段:

if(this.$route.query.redirect){// let redirect = decodeURIComponent(this.$route.query.redirect); let redirect = this.$route.query.redirect; this.$router.push(redirect);}else{ this.$router.push('/'); }

以上这篇Vue-router路由判断页面未登录跳转到登录页面的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章