vue-router

Posted 2021-05-25 郭郭郭牧鑫

Vue Router 是 Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• html5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

路由守卫

路由守卫分为3种
1、全局

论跳转任意的路由都会触发

全局的路由守卫有

router.beforeEach 进入之前
router.beforeResolve 在beforeRouteEnter调用之后调用
router.afterEach 进入路由之后

2、组件

道跳转该组件才会触发钩子函数

组件级的路由守卫有

beforeRouteEnter 路由跳转进入之前
beforeRouteUpdate 页面参数更新时触发
beforeRouteLeave 离开这个路由触发

3、单个

进入这个路由，才会触发相应的钩子函数

单个路由独享的守卫

beforeEnter只有使用这个路由，才能触发钩子函数

有三个参数：

to，from，next
to和from是将要进入和将要离开的路由对象。
next()这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航

 

两种路由模式

vue-router通过hash与History interface两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式

那么，我们要选择用哪种方式呢？

一、选择

1.  hash ——即地址栏URL中的#符号
比如这个URL：http://www.baidu.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
2.  history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
（需要特定浏览器支持）这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

在vue-router中，它提供mode参数来决定采用哪一种方式，选择流程如下:

mode 参数：

• 默认hash

• history 注：如果浏览器不支持history新特性,则采用hash方式

二、404 错误
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

编程式/组件式（声明式）导航

编程式的导航，即js控制跳转

 

声名式	编程式
<router-link :to="...">	this.$router.push('home')

// 字符串
this.$router.push('home')

// 对象
this.$router.push({ path: 'home' })

// 命名的路由
this.$router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

还有另外一种跳转 

声名式	编程式
<router-link :to="..." replace>	this.$router.replace('home')

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

 

如何传参(优缺点)

方式	发送	接收
query	this.$router.push({path:"/index",query:{id:1}})	this.$route.query.id
params	this.$router.push({name:"/Index",params:{id:1}})	this.$route.params.id

区别:

1、当用户刷新当前页面的时候，参数就会消失。使用params不在路由配参数跳转，只有第一次进入页面参数有效，刷新页面参数就会消失。

2、query可以使用path和name传参和跳转页面，而params只能使用name传参和跳转页面。

3.params在浏览器地址栏中不显示参数名称，query在浏览器地址栏中显示参数名称

 

还有一种传参，是动态路由传参
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

模式	匹配路径	$route.params
/user/:username	/user/evan	{ username: ‘evan’ }
/user/:username/post/:post_id	/user/evan/post/123	{ username: ‘evan’, post_id: ‘123’ }