這篇文章主要為大家展示了“vue如何設(shè)置路由攔截及頁面跳轉(zhuǎn)”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue如何設(shè)置路由攔截及頁面跳轉(zhuǎn)”這篇文章吧。

創(chuàng)新互聯(lián)公司專注于嵐縣網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供嵐縣營銷型網(wǎng)站建設(shè)，嵐縣網(wǎng)站制作、嵐縣網(wǎng)頁設(shè)計、嵐縣網(wǎng)站官網(wǎng)定制、微信平臺小程序開發(fā)服務(wù)，打造嵐縣網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供嵐縣網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

路由設(shè)置：router/index.js

export default new Router({ 
 routes: [ 
  { 
   path: '/selfcenter', 
   name: 'selfcenter', 
   meta: { 
    requireAuth: true // 配置此條，進(jìn)入頁面前判斷是否需要登陸 
   }, 
   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')) { // 查詢本地存儲信息是否已經(jīng)登陸 
   next(); 
  } else { 
   next({ 
    path: '/login', // 未登錄則跳轉(zhuǎn)至login頁面 
    query: {redirect: to.fullPath} // 登陸成功后回到當(dāng)前頁面，這里傳值給login頁面，to.fullPath為當(dāng)前點擊的頁面 
    }); 
  } 
 } else { 
  next(); 
 } 
});

login.vue：

登陸成功后：

sessionStorage.setItem('sid', res.data.data.sid); // 設(shè)置本地存儲信息 
this.$router.push(this.$route.query.redirect); // 跳轉(zhuǎn)至前一頁，this.$route.query.redirect是獲取上面?zhèn)鬟f過來的值

以上是“vue如何設(shè)置路由攔截及頁面跳轉(zhuǎn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！