Vue相关知识点【2】（路由相关）

1、什么是vue路由

vue路由就是指vue-router，其中router是指根据url分配到对应的处理程序，所以说路由就是用来解析URL以及调用对应的控制器并返回从试图对象中提取好的网页代码给web服务器，最终返回给客户端。

2、vue路由的优点以及缺点是什么？

优点

• 不需要每次都从服务器获取，渲染页面更快速

缺点

• 不利于SEO
• 使用浏览器前进、后退按键时重新发送请求，未合理利用缓存
• 单页面无法记住之前滚动的位置

3、vue路由的原理

Vue的路由实现：hash模式和history模式

hash模式

在浏览器中符合是#，#以及#后面的字符称之为hash，用window.location.hash读取，
特点：

• hash虽然在URL中，但不被包括在HTTP请求中，用来指导浏览器动作，对服务端安全无用，hash不会重新夹杂页面。
• hash模式下，仅hash符合之前的内容会被包含在请求中，如 http://www.xxx.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式

history采用HTML5的新特性，且提供了两个新方法：pushState()。replaceState()，可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。
特点：

• history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.co
  m/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。
• Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

4、怎么定义vue-router的动态路由？如何获取动态路由传过来的值？

定义动态路由

• 在router目录下的index.js文件中，对patj属性加上/:id。

获取动态路由传过来的值

• 使用router对象的params.id获取

//全局获取动态路由传递过来的值
$route.params.id
//局部或者是在方法内获取
this.$route.params.id

5、vue-router路由守卫的作用？

vue-router的导航钩子，主要作用是拦截导航，让他完成跳转或取消。

6、路由守卫的钩子函数都有哪些？分别是什么意思？

vue-router全局有三个守卫：

• router.beforeEach 全局前置守卫 进入路由之前
• router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
• router.afterEach 全局后置钩子 进入路由之后

组件内的守卫：

• beforeRouteEnter
• beforeRouteUpdata(2.2新增)
• beforeRouteLeave

7、路由守卫钩子函数里面的三个参数分别是什么？

to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。

next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。

next() 进入该路由。

next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。

next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

我们可以这样跳转：next(‘path地址’)或者next({path:‘’})或者next({name:‘’})
且允许设置诸如 replace: true、name: ‘home’ 之类的选项以及你用在router-link或router.push的
对象选项。

8、路由守卫的解析流程？

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

9、vue-router路由传参的方式一共有几种？他们是如何就收传递过来的参数？

一共有三种，分别是query，params，动态路由传参

怎样进行接受？

1. 通过query方式传递过来的参数一般是通过this.$route.query接收
2. 通过params方式传递过来的参数一般是通过this.$route.params接收
3. 通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

10、 query传参和params方式的区别是什么？

• query使用path和name传参跳转都可以，而params只能使用name传参跳转。
• 传参跳转页面时，query不需要再路由上配参数就能在新的页面获取到参数，params也可以不用配，但是params不在路由配参数的话，当用户刷新当前页面的时候，参数就会消失。
• 也就是说使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。