router-view学习篇

最近在写路由跳转时，遇到了一个问题，今天来记录下这个问题
问题发现：
我在写路由跳转时，用的是 router-link实现跳转

 <router-link :to="{ path: '/question',query:{id:id} }">
 	<span>跳转到A界面</span>
 </router-link>

这个是没有问题的，可以实现，但是我在写的过程中遇到，页面B—>页面B（详情页面点击列表跳转到详情页），这个时候用router-link实现就会有些问题无法实现跳转，所以这个时候我们转换个思路，点击实现跳转就可以啦
解决方案：

<span @click="goPageB">跳转到A界面</span>

goPageB(id) {
      this.$router.push({ path: '/pageB', query: { id: id }})
    }

具体vue路由传参我们可以参考官网上的来学习《路由组件传参》

我们改完之后依然会发现问题，此时id是根据我们点击动态变化

 - http://localhost:8808/#/pageB?id=56

我们发现可以实现页面跳转，因为链接地址（id）发生了变化，但是页面内容却没有发生变化，所以造成的这个原因就是在路由页面存在页面缓存。所以要解决这个问题在router-view 中加入 key 就好了，因为在路由页面存在页面缓存。

在router-view 中加入 key 就好了

<router-view :key="this.$route.fullPath"></router-view>

下面了解一下$route

vue路由对象（$route）参数简介

路由对象

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$route ，并且当路由切换时，路由对象会被更新。

so , 路由对象暴露了以下属性：

1.$route.path

字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news” 。

2.$route.params

对象，包含路由中的动态片段和全匹配片段的键值对。

3.$route.query

对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == ‘yes‘ 。

4.$route.router

路由规则所属的路由器（以及其所属的组件）。

5.$route.matched

数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。

6.$route.name

当前路径的名字，如果没有使用具名路径，则名字为空。
在页面上添加以下代码，可以显示这些路由对象的属性：

<div>
<p>当前路径：{{$route.path}}</p>
<p>当前参数：{{$route.params | json}}</p>
<p>路由名称：{{$route.name}}</p>
<p>路由查询参数：{{$route.query | json}}</p>
<p>路由匹配项：{{$route.matched | json}}</p>
</div>

详情请看原地址：《vue路由对象（$route）参数简介》

不设置 router-view 的 key 属性

由于 Vue 会复用相同组件, 即 /page/1 => /page/2 或者 /page?id=1 => /page?id=2 这类链接跳转时, 将不在执行 created,mounted 之类的钩子, 这时候你需要在路由组件中, 添加 beforeRouteUpdate 钩子来执行相关方法拉去数据。
相关钩子加载顺序为：beforeRouteUpdate

设置 router-view 的 key 属性值为 $route.path

从 /page/1 => /page/2, 由于这两个路由的 $route.path 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为：beforeRouteUpdate => created => mounted

从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.path 一样, 所以和没设置key属性一样, 会复用组件。
相关钩子加载顺序为：beforeRouteUpdate

设置 router-view 的 key 属性值为 $route.fullPath

从 /page/1 => /page/2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为：beforeRouteUpdate => created => mounted

从 /page?id=1 => /page?id=2, 由于这两个路由的 $route.fullPath 并不一样, 所以组件被强制不复用。
相关钩子加载顺序为：beforeRouteUpdate => created => mounted

详情请看原地址router-view