vue如何設(shè)置路由攔截及頁(yè)面跳轉(zhuǎn)

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

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

export default new Router({ 
 routes: [ 
  { 
   path: '/selfcenter', 
   name: 'selfcenter', 
   meta: { 
    requireAuth: true // 配置此條，進(jìn)入頁(yè)面前判斷是否需要登陸 
   }, 
   component: selfcenter 
  } 
 ] 
})

main.js：

/* eslint-disable no-new */ 
router.beforeEach((to, from, next) => { 
 if (to.matched.some(res => res.meta.requireAuth)) { // 驗(yàn)證是否需要登陸 
  if (sessionStorage.getItem('sid')) { // 查詢(xún)本地存儲(chǔ)信息是否已經(jīng)登陸 
   next(); 
  } else { 
   next({ 
    path: '/login', // 未登錄則跳轉(zhuǎn)至login頁(yè)面 
    query: {redirect: to.fullPath} // 登陸成功后回到當(dāng)前頁(yè)面，這里傳值給login頁(yè)面，to.fullPath為當(dāng)前點(diǎn)擊的頁(yè)面 
    }); 
  } 
 } else { 
  next(); 
 } 
});

login.vue：

登陸成功后：

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

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