參考Vue-Router官方文檔


Vue-Router導航守衛

效果展示

1、給需要登錄狀態才能訪問的頁面路由對象的 meta 中添加配置屬性

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

2、通過路由攔截器統一校驗

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。