vue路由拦截及页面跳转的设置方法
更新时间：2018年05月24日 13:59:02 作者：Mosowe
这篇文章主要介绍了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路由拦截及页面跳转的设置方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
本文将详细介绍如何在Vue3中实现一个每秒钟自动更新的网页时钟,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-07-07
这篇文章主要为大家详细介绍了vue实现登录验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要通过示例和大家一起浅析一下Vue3的响应式原理，文中的示例代码讲解详细，对我们学习Vue3有一定帮助，需要的可以参考一下2022-08-08
这篇文章主要为大家详细介绍了如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStorage 或 sessionStorage 中管理数据的流程,需要的可以参考下2023-12-12
这篇文章主要介绍了Vue.js实现文件上传压缩优化处理,本文给大家介绍两种方法一种是借助canvas的封装的文件压缩上传，二是使用compressorjs第三方插件实现，本文给大家介绍的非常详细需要的朋友可以参考下2022-11-11
我们日常项目开发中,少不了组件之间的通信,我们可能只知道一些常见的方式比如props,emits,其实,实现组件间的通信有很多种方式,本文就给大家总结一些我们常见的通信方式,需要的朋友可以参考下2023-08-08
vue安装依赖npm install过程中报错npm ERR! cb() nev
这篇文章主要介绍了vue安装依赖npm install过程中报错npm ERR! cb() never called!问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
vue2.5.2使用http请求获取静态json数据的实例代码
这篇文章主要介绍了vue2.5.2使用http请求获取静态json数据的实例代码,需要的朋友可以参考下2018-02-02
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
这篇文章主要介绍了解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
本文主要介绍了element input输入框自动获取焦点的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
最新评论