這篇文章主要為大家展示了“vue如何設置路由攔截及頁面跳轉”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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如何設置路由攔截及頁面跳轉”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
