vue路由怎么监听

vue 路由可以通过 router.beforeeach 和 router.aftereach 全局守卫来监听路由变化。router.beforeeach 在每次导航之前执行函数，允许在导航之前执行定制动作。router.aftereach 在每次导航之后执行函数，允许在导航后进行定制操作。

(图1)

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)