2025年路由守卫（路由守卫面试题）

大家好，我是讯享网，很高兴认识大家。

路由导航守卫和 Vue 实例生成周期钩子函数的执行顺序？

路由导航守卫都是在 Vue 实例生命周期钩子函数之前执行的

Vue-Router 有哪几种导航钩子？

1. 全局守卫

全局前置守卫：

全局解析守卫：

讯享网

全局后置钩子：

路由独享守卫

beforeEnter

讯享网

组件内的守卫

beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave

讯享网

注意：只有 beforeRouteEnter 支持给 next 传递回调

讲一下完整的导航解析流程？

导航被触发
在失活的组件里调用 beforeRouteLeave 守卫
调用全局的 beforeEach 守卫
在重用的组件里调用 beforeRouteUpdate 守卫
在路由配置里调用 beforeEnter 守卫
解析异步路由组件
在被激活的组件里调用 beforeRouteEnter
在所有组件内守卫和异步路由被解析之后，调用全局的解析守卫 beforeResolve
导航被确认
调用全局后置钩子 afterEach
触发 DOM 更新
用创建好的组件实例，传给 beforeRouteEnter 中的 next 回调函数

导航守卫三个参数的含义？

to：即将要进入的目标路由对象
from：当前导航正要离开的路由对象
next：一定要调用该方法来 resolve 这个钩子，不然路由跳转不过去
- next()：进入下一个路由
- next(false)：中断当前的导航
- next(‘/’) 或 next({path: ‘/’})：当前导航被中断，进行新的一个导航

route 和 router 有什么区别？

是当前路由信息对象，包括 path、params、hash、query、fullPath、matched、name 等路由信息参数
是路由实例对象，包括了路由的跳转方式 push()、go()，钩子函数等
是创建路由实例的配置项，用来配置多个 route 路由对象

路由之间跳转有哪些方式？

声明式导航： 通过内置组件跳转

编程式导航： 通过调用实例的方法跳转

使用 push 方法跳转

讯享网

使用 repalce 方法跳转

Vue-Router 传参有哪些方式？

query 传参和接参
- 传参
```
讯享网
```
- 接参
params 传参和接参
- 传参
```
讯享网
```
- 接参

注意： params 传参，push 里面只能是 name: ‘xxx’，不能是 path: ‘/xxx’，因为 params 只能用 name 来引入路由，如果这里写成了 path，目标页面接收参数会是 undefined

query 和 params 的区别？

query 刷新页面参数不会消失，params 传参页面参数会消失，可以考虑本地存储解决
query 传参会显示在 url 地址上，params 传参不会显示地址上

如何监听路由参数的变化？

有两种方法可以监听路由参数的变化，但是只能用在包含的组件内

watch 监听$route 对象

讯享网

调用组件内的守卫 beforeRouteUpdate

谈谈你对 router-link 的了解？

to
必填，标识目标路由的链接，当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者描述目标路由的对象

repalce
默认值 false，若设置的话，当点击时，会调用而不是

append
设置属性后，则在当前 (相对) 路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置，则路径为 /b，如果配了，则为 /a/b

tag
让渲染成设置的标签，如，就会渲染成

active-class
默认值为，设置链接激活时使用的 CSS 类名，默认值可以通过路由的构造选项来全局配置

exact-active-class
默认值为，设置链接被精确匹配的时候应该激活的 class，默认值可以通过路由构造函数选项进行全局配置

exact
是否精确匹配，默认为 false

event
声明可以用来触发导航的事件，可以是一个字符串或是一个包含字符串的数组，默认是

讯享网

讯享网

说说 active-class 是哪个组件的属性？

组件的属性，设置连接激活时使用的 css 类名，默认值可以通过路由的构造选项来全局配置

css

router.js

讯享网

怎么重定向页面？

重定向 path

重定向到命名的路由

讯享网

可以写成一个方法，动态返回重定向的目标

vue-router 怎么配置 404 页面？

在 router.js 中，由于路由是从上到下执行的，只要在路由配置中最后面放个*号就可以了

讯享网

切换路由时，需要保存草稿的功能，怎么实现？

使用包裹

vue 路由中去掉

在路由 router.js 中配置

讯享网

hash 模式和 history 模式相比较

1. hash 模式：

优点：

缺点：

history 模式：