vue2路由守卫

### Vue2 中路由守卫的使用方法 #### 全局前置守卫 全局前置守卫会在每次路由切换之前调用。通过 `router.beforeEach` 方法可以注册一个全局前置守卫，在这里可以根据条件阻止导航或者重定向。 ```javascript const router = new VueRouter({ routes: [...] }) router.beforeEach((to, from, next) => { console.log('正在前往:', to.path); if (to.meta.requiresAuth && !isAuthenticated()) { next('/login'); } else { next(); } }) ``` 此代码片段展示了如何设置一个简单的身份验证逻辑，如果目标路径需要认证而用户未登录，则会重定向至登录页面[^1]。 #### 组件内的守卫 组件内部也可以定义自己的守卫函数，这些守卫只对该组件生效。常见的有： - **beforeRouteEnter**: 导航进入该组件实例时调用。 - **beforeRouteUpdate**: 当当前路由改变但是该组件被复用时调用。 - **beforeRouteLeave**: 导航离开该组件实例时调用。 下面是一个例子展示如何在一个名为 `UserProfile.vue` 的文件里应用上述守卫: ```javascript export default { data () { return { user: null, }; }, beforeRouteEnter(to, from, next){ // 此处无法获取 this 实例，因为当钩子执行前，组件实例还没创建 fetchUserData().then(user => { next(vm => vm.user = user); }); }, beforeRouteUpdate(to, from, next){ // 可以访问this实例 this.fetchData(to.params.id).then(() => next()); }, beforeRouteLeave(to, from, next){ const answer = window.confirm('Do you really want to leave? You have unsaved changes!'); if (answer) { next(); } else { next(false); } } } ``` 这段代码演示了在不同场景下如何利用组件级别的路由守卫来进行数据加载以及防止意外退出操作[^3]。 #### 路由独享前置守卫 对于某些特殊需求，比如对单一路由做更精细控制的时候，就可以采用独享前置守卫的方式。这通常是在配置路由表时指定给某条记录使用的回调函数。 ```javascript const routes = [ { path: '/admin', component: AdminPanel, meta: { requiresAdmin: true }, // 自定义元信息字段 beforeEnter: (to, from, next) => { let hasPermission = checkIfUserIsAdmin(); if (!hasPermission) { alert("You don't have permission!"); next({ name: 'home' }); // 或者其他处理方式 } else { next(); } } } ]; ``` 以上示例说明了怎样为 `/admin` 这一特定路径添加额外的安全层，只有满足一定条件下才允许访问[^2]。