1. **基于`watch`属性监听`$route`对象**
- **原理**：
- 在Vue实例中，`$route`对象包含了当前路由的信息。当路由发生变化时，`$route`对象也会相应地更新。通过`watch`选项，可以监测`$route`对象的变化。`watch`是一个对象，它的键是要观察的表达式或变量，值是对应的回调函数。
- **示例代码**：
```javascript
// 定义一个Vue组件
const MyComponent = {
template: '<div>当前路由路径: {{ $route.path }}</div>',
watch: {
$route(newRoute, oldRoute) {
console.log('路由发生变化');
console.log('旧路由路径:', oldRoute.path);
console.log('新路由路径:', newRoute.path);
}
}
};
```
- **解释**：
- 当`$route`对象发生变化时，`watch`中的回调函数会被触发。这个回调函数接收两个参数，`newRoute`表示变化后的路由对象，`oldRoute`表示变化前的路由对象。在回调函数中，可以根据新旧路由对象的信息进行相应的操作，比如更新组件内的数据、发送数据请求等。
2. **使用导航守卫`beforeRouteUpdate`（仅适用于路由组件）**
- **原理**：
- 导航守卫是Vue Router提供的一种机制，用于在路由导航过程中进行拦截和处理。`beforeRouteUpdate`是一个路由组件内的守卫，它会在当前路由发生变化，并且该组件被复用时调用。这对于需要在路由参数变化时更新组件状态的情况非常有用。
- **示例代码**：
```javascript
const MyRouteComponent = {
template: '<div>路由参数: {{ $route.params.id }}</div>',
beforeRouteUpdate(to, from, next) {
console.log('路由参数即将更新');
console.log('旧路由参数:', from.params.id);
console.log('新路由参数:', to.params.id);
// 进行组件内部数据更新等操作
// 例如，根据新的路由参数重新获取数据
// 完成操作后，调用next()让导航继续
next();
}
};
```
- **解释**：
- `beforeRouteUpdate`守卫接收三个参数，`to`是即将要进入的目标路由对象，`from`是当前路由对象，`next`是一个函数，用于控制导航流程。在守卫内部，可以根据`to`和`from`的信息进行操作，如更新组件内的数据。最后必须调用`next()`，否则路由导航会被中断。
3. **利用`router - after - each`全局导航钩子（在`router/index.js`等路由配置文件中）**
- **原理**：
- 全局导航钩子可以在整个应用的路由导航过程中进行统一的处理。`router - after - each`钩子会在每次路由导航成功完成后被调用，无论导航是在哪个组件中触发的。
- **示例代码（假设使用Vue Router 3.x）**：
```javascript
import Vue from 'vue';
import Router from 'vue - router';
Vue.use(Router);
const router = new Router({
// 路由配置
routes: [
// 路由规则
]
});
router.afterEach((to, from) => {
console.log('全局路由导航完成');
console.log('从', from.path, '到', to.path);
});
export default router;
```
- **解释**：
- 在这个示例中，`router - after - each`钩子函数接收`to`和`from`两个参数，分别表示目标路由和原始路由。在钩子函数内部，可以进行一些全局的操作，如页面统计（记录每个页面的访问情况）、设置页面标题（根据不同的路由设置不同的文档标题）等。这种方式可以方便地对整个应用的路由导航进行监控和处理。