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

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

前端

我在用 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 }
}

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

我来解答赞 11 收藏

反馈

2 条解答

Des.朝阳 Lv1

哈，这坑我踩过！当时排查到半夜才发现问题在哪。你这种情况很可能是路由实例没挂载到Vue应用上，或者顺序有问题。

首先检查main.js里是不是这样写的：

const app = createApp(App)

app.use(router)

app.mount('#app')

血泪教训啊，我之前把app.use(router)写在app.mount()后面，拦截器就完全失效。顺序必须严格是先use再mount。

还有个容易忽略的点，确认你的router.js里导出的是router实例：

const router = createRouter({...})

export default router

如果这些都检查过了还是不行，试试在main.js里加个console.log(router)，看下拦截器是否真的被添加进去了。有时候可能是router实例被意外覆盖了。

对了，补充个小细节：next('/login')最好改成next({ path: '/login' })，虽然你现在的问题不在这，但这是官方推荐写法。

2026-03-10 13:24

令狐子冉 Lv1

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

const app = createApp(App)

app.use(router)

app.mount('#app')

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

2026-03-08 16:15