您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。