vue路由拦截及页面跳转的设置方法
路由设置：router/index.js
export default new Router({
routes: [
{
path: '/selfcenter',
name: 'selfcenter',
meta: {
requireAuth: true // 配置此条，进入页面前判断是否需要登陆
},
component: selfcenter
}
]
})
main.js：
/* eslint-disable no-new */
router.beforeEach((to, from, next) => {
if (to.matched.some(res => res.meta.requireAuth)) { // 验证是否需要登陆
if (sessionStorage.getItem('sid')) { // 查询本地存储信息是否已经登陆
next();
} else {
next({
path: '/login', // 未登录则跳转至login页面
query: {redirect: to.fullPath} // 登陆成功后回到当前页面，这里传值给login页面，to.fullPath为当前点击的页面
});
}
} else {
next();
}
});
login.vue：
登陆成功后：
sessionStorage.setItem('sid', res.data.data.sid); // 设置本地存储信息
this.$router.push(this.$route.query.redirect); // 跳转至前一页，this.$route.query.redirect是获取上面传递过来的值
总结
以上所述是小编给大家介绍的vue路由拦截及页面跳转的设置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持！
-
例如，我们可能希望一些路线只有在用户登录或接受条款和条件后才可访问。 我们可以使用路由哨兵来检查这些条件并控制对路由的访问。 路由哨兵还可以控制用户是否可以离开某个路由。 例如，假设用户已将信息键入页面上的表单，但尚未提交表单。 如果这时离开页面，他们将丢失信息。 如果用户尝试离开路由而不是提交或保存信息，我们可以提示用户。 Angular 提供了五种路由拦截哨兵： CanActive 激活拦截
-
本文向大家介绍vue-router跳转页面的方法，包括了vue-router跳转页面的方法的使用技巧和注意事项，需要的朋友参考一下 使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了，用npm安装命令 第二步在.vue组件里添加标签，
-
本文向大家介绍Vue登录拦截 登录后继续跳转指定页面的操作，包括了Vue登录拦截 登录后继续跳转指定页面的操作的使用技巧和注意事项，需要的朋友参考一下 在开发中我们经常遇到这样的需求，需要用户登录后才可以访问该页面，如果用户没有登录点击该页面时则自动跳转到登录页面，登录后又跳转到链接的页面而不是首页，这种问题该如何去做呢？ 1、在路由器router下的 index.js 的配置中，给需要拦截登录的
-
本文向大家介绍vue二级路由设置方法，包括了vue二级路由设置方法的使用技巧和注意事项，需要的朋友参考一下 项目当中使用vue的时候一定会用到路由，并且二级路由甚至三集路由的需求都是刚需，当然，多级路由的配置方法和二级的是一样的，简单讲讲二级路由的配置吧。 首先把一级路由的结构准备好： 在main.js里引入模块，并配置路由： 先看效果 点击每天听本书后进入下一级 在main.js里设
-
本文向大家介绍vue2+el-menu实现路由跳转及当前项的设置方法实例，包括了vue2+el-menu实现路由跳转及当前项的设置方法实例的使用技巧和注意事项，需要的朋友参考一下 Vue.js 是什么 Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还
-
我的页面是三级嵌套路由，结构类似于 /message/detail/0。 但当我使用 this.$router.push('/index') 返回首页的时候，页面路径变成了/message/detail/index。 请问我该如何解决这个问题，希望从 /message/detail/0 页面直接跳转到 /index。 这个是路由配置的JS：