Vue路由拦截不生效是怎么回事？

路杨提问于 2026-03-08 16:12:21 阅读 2

前端

我在用 Vue Router 做登录权限控制，明明写了 beforeEach 拦截，但没登录的用户还是能直接访问 /dashboard 页面，完全没被拦住。

我试过在 router.beforeEach 里加 console.log，发现根本没执行到那段逻辑。路由配置是用 createRouter 创建的，也正确引入了 router 实例到 main.js 里。

这是我的拦截代码：

router.beforeEach((to, from, next) => {
  const isLoggedIn = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')
  } else {
    next()
  }
})

而且我在路由里也加了 meta 标记：

{
  path: '/dashboard',
  component: Dashboard,
  meta: { requiresAuth: true }
}

但就是不管用，直接输入地址就能进，到底哪里漏了？

我来解答赞 1 收藏

反馈

1 条解答

令狐子冉 Lv1

啧，你这个router实例可能没挂载到app上。检查下main.js是不是这样写的：

const app = createApp(App)

app.use(router)

app.mount('#app')

我之前这样搞的，漏了app.use(router)的话拦截器就是摆设。

2026-03-08 16:15