vue2路由导航守卫
时间: 2025-01-12 16:40:37 浏览: 7
Vue2 路由 Navigation Guards 使用方法
全局前置守卫 (Global Before Guard)
全局前置守卫会在每个路由切换前被调用,允许在此处执行一些通用逻辑。此守卫接收三个参数:to
, from
和 next
函数。
to
: 即将要进入的目标路由对象。from
: 当前导航正要离开的路由对象。next
: 控制路由跳转的函数,必须调用以继续导航流程[^3]。
const router = new VueRouter({
routes: [...],
});
router.beforeEach((to, from, next) => {
console.log('Navigating to:', to.path);
next();
});
组件内的守卫 (In-Component Guards)
组件内也可以定义自己的导航守卫,这些守卫只对该特定组件生效。常见的有:
beforeRouteEnter
: 在渲染该组件实例之前调用,无法访问到this
实例。beforeRouteUpdate
: 在当前路由改变但是目标组件保持不变的情况下调用。beforeRouteLeave
: 导航离开该组件对应的路由时触发。
export default {
beforeRouteEnter(to, from, next) {
// 此处不能访问 this
next(vm => {
vm.loadUserData(); // 假设这是一个加载用户数据的方法
});
},
methods: {
loadUserData() {
// 加载用户的操作...
}
}
}
编程式导航与守卫配合使用
编程式导航指的是不依赖于 <router-link>
或者 URL 地址栏的变化而主动发起的页面跳转行为。可以通过 JavaScript 的方式来实现这种类型的导航,并且可以在其中加入条件判断或者其他业务逻辑[^2]。
// 执行某些验证之后再决定是否前往新路径
if (isValid()) {
this.$router.push({ path: '/new-path' });
} else {
alert('Invalid action!');
}