[Vue的面试题]路由相关问题

路由的模式和区别

1 路由的模式

路由的模式：history、hash

2 路由的区别

区别：

1. 关于找不到当前页面发送请求的问题

history会给后端发送一次(get)请求,这样会给后端造成压力，所以一般会配置一个404的页面

hash则不需要考虑这些问题，它不会给后端发送请求

2. 关于项目打包前端自测问题

hash是可以看到打包完后页面渲染出的内容

history默认情况则是看不到内容的

3. 关于表象不同

hash:url地址中间会生成一个#

history:url地址则会用/来隔开

3 子路由

子路由简示如下：

按上图逻辑，则是App.vue里面使用路由模块包涵Main.vue，然后Main.vue组件里面再次使用了路由模块包涵Home.vue和User.vue来进行切换

组件代码简示如下：

也可以这样理解

子组件也可以理解为是嵌套组件

4 动态路由

1、 什么是动态路由

1 路由可变，不是写死的，动态加载

2 存储分两种：存前端，存数据库

2、动态路由的好处

十分灵活、无需手动维护、而且增加了安全性

3、动态路由的运作

简而言之就是通过对后端数据的请求，经过守卫拦截和路由添加等处理，把请求到的数据添加到路由当中，然后再渲染到页面之中

一般动态路由用来区分多个登录角色，如管理员和正常用户等

5 $route和$router的区别

$route对象

$route对象：表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。

当前路由对象的方法

1、 $route.path ：字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。

2、$route.params ：一个 key/value 对象，包含了 动态片段 和 全匹配片段， 如果没有路由参数，就是一个空对象。

3、$route.query ：一个 key/value 对象，表示 URL 查询参数。 例如，对于路径 /foo?user=1，则有 $route.query.user == 1， 如果没有查询参数，则是个空对象。

4、$route.hash ： 当前路由的hash值 (不带#) ，如果没有 hash 值，则为空字符串。

5、$route.fullPath ： 完成解析后的 URL，包含查询参数和hash的完整路径。

6、$route.matched ： 数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

7、$route.name ：当前路径名字

8、$route.meta ： 路由元信息

$router对象

$router对象：是全局路由的实例，是router构造方法的实例。

路由实例的方法：（拿home路由举例）

$router.push('home') ：直接跳转到home路由界面，此跳转是有历史记录的，使用浏览器的返回按钮是可以返回的

$router.replace('home):此跳转是直接将home路由界面替换了当前页面，而不是跳转到home路由界面，所以是无法返回的

$this.$router.go(x):当x为1的时候是将浏览器页面前进，当x为0的时候是将浏览器页面刷新，当x为-1的时候则是将浏览器页面后退

6 路由传值

第一种方法：$router.push

对应的路由配置:

我们在另外的组件则可以用this.$route.params.id 来获取参数

第二种方法： params传参通过name

对应的路由配置:注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了

我们在另外的组件仍可以用this.$route.params.id 来获取参数

第三种方法: query传参通过path跳转

对应的路由配置:同第二种方法一样

在组件中使用的方法则不一样:this.$route.query.id

tip:

使用path来匹配路由，然后通过query来传递参数

这种情况下 query传递的参数会显示在url后面?id=？

7 导航故障

一般导航故障产生于当前页面跳当前页面(不是刷新页面)，然后配置的路由就容易报错

官网说明：https://v3.router.vuejs.org/zh/guide/advanced/navigation-failures.html#%E6%A3%80%E6%B5%8B%E5%AF%BC%E8%88%AA%E6%95%85%E9%9A%9C

解决：

import VueRouter from 'vue-router'

const routerPush = VueRouter.prototype.push

VueRouter.prototype.push = function (location) {

return routerPush.call(this, location).catch(error => error)

}

主要就是catch(error => error)，发现错误并抛出，就不会报错

上面这串代码可插入到main.js中使用

8 导航守卫

1 全局守卫router.beforeEach

当从一个路由跳转到另一个路由的时候触发此守卫，这个守卫也叫全局前置守卫，所以它是跳转前触发的。任何路由跳转都会触发。

每个守卫都有三个参数：

to：这是你要跳去的路由对象。

from：这是你要离开的路由对象。

next：是一个方法，它接受参数。这个方法必须调用要不就跳不过去了，你可以把它看做保安。必须给它打个招呼，要不然不让你过。

next（）。这就是告诉保安我要过去，去哪里呢？ 就是to了。

next（false）。如果传入false。保安就不让过了。也就是中断跳转。

next（{path：“/”}）。这个意思是保安不让过，并把你交到另一地方审查了。也就是中断跳转，跳转到一个新的路径。

2 全局后置钩子 router.afterEach

这个钩子它没有next方法，也不会阻止你的跳转，可以用来记录跳转完成后的信息，或者打印一些东西，触发一些互动

3 路由独享守卫 beforeEnter

这个守卫只有在进入相应的路由的时候才会调用，效果跟全局守卫类似，但它值守护有它存在的路由

4 组件内守卫 beforeRouteEnter，beforeRouteUpdate，beforeRouteLeave

这三个守卫是写在组件里，beforeRouteEnter守卫 不能 访问 this,因为在调用的时候，组件还未被创建出来，其他两个可以访问this

tip:一般不用组件内守卫，因为不易维护

5 完整导航流程

1、导航被触发。

2、在失活的组件里调用离开守卫。

3、用全局的 beforeEach 守卫。

4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

5、在路由配置里调用 beforeEnter。

6、解析异步路由组件。

7、在被激活的组件里调用 beforeRouteEnter。

8、调用全局的 beforeResolve 守卫 (2.5+)。

9、导航被确认。

10、调用全局的 afterEach 钩子。

11、触发 DOM 更新。

12、用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。