Vue 路由可以通过 router.beforeEach 和 router.afterEach 全局守卫来监听路由变化。router.beforeEach 在每次导航之前执行函数，允许在导航之前执行定制动作。router.afterEach 在每次导航之后执行函数，允许在导航后进行定制操作。
Vue 路由监听
如何监听 Vue 路由？
Vue 路由提供了一种监视路由变化并执行自定义操作的方法。可以通过使用 router.beforeEach 和 router.afterEach 全局守卫来实现。
全局守卫
立即学习“前端免费学习笔记（深入）”；
router.beforeEach
router.beforeEach 允许在每次导航之前执行一个函数。该函数接收三个参数：
-
to: 目标路由 -
from: 离开的路由 -
next: 一个回调函数，用于继续导航或中止它
router.afterEach
router.afterEach 允许在每次导航后执行一个函数。该函数接收两个参数：
-
to: 目标路由 -
from: 离开的路由
使用方法
要在应用程序中使用全局守卫，请在创建路由器实例时将它们添加为插件：
import Vue from 'vue'
import VueRouter from 'vue-router'
import { routerBeforeEach, routerAfterEach } from '@/router/guards'
Vue.use(VueRouter)
const router = new VueRouter({
...
})
router.beforeEach(routerBeforeEach)
router.afterEach(routerAfterEach)具体示例
以下示例展示了如何使用全局守卫来监听路由变化并显示一条消息：
// router/guards.js
export const routerBeforeEach = (to, from, next) => {
console.log('Navigating to:', to.path)
next()
}
export const routerAfterEach = (to, from) => {
console.log('Navigated from:', from.path, 'to:', to.path)
}其他方法
除了全局守卫，还可以使用以下方法来监听路由变化：
- 通过
@change事件：监听每个路由更改 - 通过
$route.meta：访问路由的元数据信息，这些信息可以在导航守卫中使用 - 通过
router.push和router.replace：在代码中强制导航
