參考Vue-Router官方文檔


Vue-Router導(dǎo)航守衛(wèi)

效果展示

1、給需要登錄狀態(tài)才能訪(fǎng)問(wèn)的頁(yè)面路由對(duì)象的 meta 中添加配置屬性

{ // 小智同學(xué)name: 'user-chat',path: '/user/chat',component: () => import('@/views/user-chat'),meta: { requiresAuth: true } },

2、通過(guò)路由攔截器統(tǒng)一校驗(yàn)

router.beforeEach((to, from, next) => {if (to.name === 'login' || !to.meta.requiresAuth) {return next()}if (store.state.user) {return next()}Dialog.confirm({title: '該功能需要登錄，確認(rèn)登錄嗎？'}).then(() => {next({name: 'login',query: {redirect: from.fullPath}})}).catch(() => {// on cancel}) })

總結(jié)

以上是生活随笔為你收集整理的Vue项目中使用 路由导航守卫 处理页面的访问权限的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。