最近在写路由跳转时,遇到了一个问题,今天来记录下这个问题
问题发现:
我在写路由跳转时,用的是 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