Vue Router 的路由守卫：再见，旧爱！你好，新欢！
大家好，我是你们的老朋友，今天咱们来聊聊 Vue Router 里两个让人又爱又恨的路由守卫：beforeRouteUpdate 和 beforeRouteLeave。 别害怕，这俩家伙其实挺简单的，掌握了它们的脾气，你的路由控制就能更上一层楼！
路由守卫：门卫大爷的唠叨
首先，咱们得明白路由守卫是干嘛的。 简单来说，它们就像你家小区的门卫大爷，在你进出小区的时候，总要唠叨几句，检查你是不是该进该出，有没有带危险品。
Vue Router 的路由守卫就是在路由跳转的不同阶段，给你机会去检查、修改甚至取消路由跳转行为。 它们分为全局守卫、路由独享守卫和组件内守卫，今天咱们重点讲的 beforeRouteUpdate 和 beforeRouteLeave，就属于组件内守卫。
beforeRouteUpdate：参数变了，别装不认识！
场景：组件复用，参数变化
想象一下，你正在浏览一个商品详情页，路由是 /product/:id。 你从商品 ID 为 1 的页面，点击链接跳转到商品 ID 为 2 的页面。 如果你没有使用 beforeRouteUpdate，你的组件可能压根不会更新！ 因为 Vue 默认会复用相同组件，只更新 props 和 data。
执行时机：
beforeRouteUpdate 钩子在以下情况执行：
- 当前路由对应的组件已经被复用。
- 但是，params、query 或 hash 发生了变化。
也就是说，路由地址变了，但组件没变，beforeRouteUpdate 就会被触发。
作用：
beforeRouteUpdate 允许你在组件被复用，但路由参数变化时，执行一些逻辑，比如：
- 重新获取数据，更新页面内容。
- 根据新的路由参数，修改组件的状态。
- 阻止路由跳转（虽然这种情况比较少见）。
代码示例：
<template>
<div>
<h1>Product ID: {{ productId }}</h1>
<p>Product Name: {{ productName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
productId: null,
productName: 'Loading...'
};
},
watch: {
productId(newProductId) {
console.log('productId changed to:', newProductId);
this.fetchProductData(newProductId);
}
},
beforeRouteUpdate(to, from, next) {
console.log('beforeRouteUpdate triggered!');
this.productId = to.params.id; // 更新 productId
next(); // 必须调用 next() 才能继续路由跳转
},
created() {
this.productId = this.$route.params.id; // 初始化 productId
this.fetchProductData(this.productId);
},
methods: {
async fetchProductData(id) {
// 模拟异步获取商品数据
console.log('Fetching data for product ID:', id);
await new Promise(resolve => setTimeout(resolve, 500));
this.productName = `Product ${id}`;
}
}
};
</script>代码解释：
beforeRouteUpdate(to, from, next)： 这是beforeRouteUpdate钩子函数，接收三个参数：to：即将要进入的目标路由对象。from：当前导航正要离开的路由对象。next：一个函数，必须调用它来 resolve 这个钩子。执行效果依赖next()方法的调用参数。
this.productId = to.params.id;： 从to路由对象的params中获取新的商品 ID，更新组件的productId数据。next();： 调用next()，允许路由继续跳转。 如果你不调用next()，路由跳转就会被阻塞。
重要提示：
beforeRouteUpdate必须调用next()方法，否则路由跳转会被阻塞。- 你可以在
next()中传入参数，来控制路由跳转的行为。 例如：next(false)：取消路由跳转。next('/')或next({ path: '/' })：跳转到不同的 URL。next(error)：如果next()接收到一个Error实例，那么导航会被终止且该错误会被传递给router.onError()注册过的回调。
进阶：用 watch 代替 beforeRouteUpdate？
在上面的例子中，我们还使用了 watch 来监听 productId 的变化。 那么问题来了，我们是否可以用 watch 完全代替 beforeRouteUpdate 呢？
答案是：不完全可以。
虽然 watch 可以监听到 productId 的变化，并执行相应的逻辑，但 beforeRouteUpdate 提供了更明确的路由跳转控制时机。 它可以让你在路由跳转真正发生之前，进行一些预处理，甚至可以取消路由跳转。
总结：
| 特性 | beforeRouteUpdate |
watch |
|---|---|---|
| 执行时机 | 路由更新前 | 数据变化后 |
| 主要用途 | 路由跳转控制，预处理 | 响应数据变化 |
是否必须调用 next() |
是 | 否 |
所以，在需要精确控制路由跳转行为时，beforeRouteUpdate 仍然是首选。 如果只是简单地响应数据变化，watch 也是一个不错的选择。
beforeRouteLeave：挥一挥衣袖，不带走一片云彩？
场景：离开当前组件
beforeRouteLeave 钩子在你离开当前路由对应的组件时被调用。 它可以让你在离开页面之前，做一些清理工作，或者提示用户保存未保存的更改。
执行时机：
beforeRouteLeave 钩子在以下情况执行：
- 导航离开该组件的对应路由时。
这意味着，无论你是通过点击链接、浏览器前进/后退，还是手动调用 router.push()，只要你要离开当前组件，beforeRouteLeave 就会被触发。
作用：
beforeRouteLeave 允许你在离开组件之前，执行一些逻辑，比如：
- 提示用户保存未保存的更改。
- 取消未完成的异步请求。
- 清理定时器或事件监听器。
- 阻止路由跳转（如果用户有未保存的更改）。
代码示例：
<template>
<div>
<textarea v-model="message"></textarea>
<button @click="saveChanges">Save Changes</button>
</div>
</template>
<script>
export default {
data() {
return {
message: '',
hasChanges: false
};
},
watch: {
message(newValue, oldValue) {
this.hasChanges = newValue !== oldValue;
}
},
beforeRouteLeave(to, from, next) {
if (this.hasChanges) {
const confirmLeave = window.confirm('You have unsaved changes. Are you sure you want to leave?');
if (confirmLeave) {
next(); // 允许离开
} else {
next(false); // 阻止离开
}
} else {
next(); // 允许离开
}
},
methods: {
saveChanges() {
// 模拟保存更改
console.log('Saving changes:', this.message);
this.hasChanges = false;
}
}
};
</script>代码解释：
beforeRouteLeave(to, from, next)： 这是beforeRouteLeave钩子函数，同样接收三个参数：to、from和next。if (this.hasChanges)： 检查是否有未保存的更改。window.confirm('You have unsaved changes...')： 弹出一个确认对话框，询问用户是否要离开。next();： 如果用户确认离开，调用next()允许路由跳转。next(false);： 如果用户取消离开，调用next(false)阻止路由跳转。
重要提示：
beforeRouteLeave必须调用next()方法，否则路由跳转会被阻塞。- 你可以使用
next(false)来阻止路由跳转。 - 在
beforeRouteLeave中，你应该避免执行耗时的同步操作，因为这会阻塞路由跳转。 尽量使用异步操作，并及时调用next()。
进阶：异步操作和 beforeRouteLeave
如果你的 beforeRouteLeave 中需要执行异步操作，比如发送一个网络请求来保存数据，你应该如何处理呢？
方法一：使用 Promise
beforeRouteLeave(to, from, next) {
if (this.hasChanges) {
this.saveData()
.then(() => {
next(); // 数据保存成功，允许离开
})
.catch(error => {
console.error('Failed to save data:', error);
// 可以选择阻止离开，或者提示用户
next(false); // 阻止离开
});
} else {
next(); // 允许离开
}
},
methods: {
saveData() {
return new Promise((resolve, reject) => {
// 模拟异步保存数据
setTimeout(() => {
// 假设保存成功
resolve();
// 如果保存失败，调用 reject(error)
}, 500);
});
}
}方法二：使用 async/await
async beforeRouteLeave(to, from, next) {
if (this.hasChanges) {
try {
await this.saveData(); // 等待数据保存完成
next(); // 数据保存成功，允许离开
} catch (error) {
console.error('Failed to save data:', error);
// 可以选择阻止离开，或者提示用户
next(false); // 阻止离开
}
} else {
next(); // 允许离开
}
},
methods: {
async saveData() {
// 模拟异步保存数据
await new Promise(resolve => setTimeout(resolve, 500));
}
}总结：
无论使用哪种方法，都要确保在异步操作完成后，调用 next() 方法来控制路由跳转。 如果异步操作失败，你可以选择阻止离开，或者提示用户。
总结：
beforeRouteUpdate 和 beforeRouteLeave 是 Vue Router 中非常有用的组件内守卫。 它们允许你在组件被复用，但路由参数变化时，以及离开组件之前，执行一些逻辑，控制路由跳转行为。
| 路由守卫 | 执行时机 | 作用 |
|---|---|---|
beforeRouteUpdate |
组件复用，但 params/query/hash 变化时 | 重新获取数据，更新组件状态，阻止路由跳转 |
beforeRouteLeave |
导航离开当前组件时 | 提示用户保存更改，取消未完成的异步请求，清理定时器或事件监听器，阻止路由跳转 |
掌握了它们的用法，你就可以更好地控制你的路由，提升用户体验。
好了，今天的讲座就到这里。 希望大家以后在使用 Vue Router 的时候，能够更加得心应手！ 记住，路由守卫就像门卫大爷，虽然唠叨，但都是为了你好！ 下次再见！