vue 中js页面跳转到静态页面_Vue.js当前页面跳转当前页面$route.fullpath

心已赠人 2022-10-27 01:49 210阅读 0赞

在vue中如何去实现当前页面跳转当前页面，看完这篇文章，相信你的心里会有答案关于当前页面跳转在实际项目中有这个需求，当然，实现方式很多，在这里主要说一个比较优雅的方式，通过绑定的key去实现

## 第一步 ##

首先我们在跳转页面要去做个跳转动作，在跳转时候我们传一个参数fullpath(自定义)给当前页面，如下：

<table> 
 <tbody> 
  <tr> 
   <td>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11</td> 
   <td>this.$router.push({ <br>&nbsp; path:&nbsp;'/page1',<br>&nbsp; query:&nbsp;{ <br>&nbsp; &nbsp; fullpath:&nbsp;Date.parse(new&nbsp;Date())}});// 当然，我们还要在created或者mounted等函数中去打印下，正面跳转后当前页面确实有刷新，钩子函数有重新调用。<br>mounted&nbsp;()&nbsp;{ <br>&nbsp; console.log('打印出来了...');},</td> 
  </tr> 
 </tbody> 
</table>

## 第二步 ##

找到你这个组件是在哪个位置渲染的，也就是，在这个上加key，通过改变key达到目的

<table> 
 <tbody> 
  <tr> 
   <td>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>11<br>12<br>13<br>14</td> 
   <td>&lt;template&gt;&lt;router-view&nbsp;:key="fullpath"&gt;router-view&gt;template&gt;&lt;script&gt;<br>export&nbsp;default&nbsp;{ <br>&nbsp; name:&nbsp;'Layout',<br>&nbsp; computed:&nbsp;{ <br>&nbsp; &nbsp; fullpath:&nbsp;function()&nbsp;{ return&nbsp;this.$route.query.fullpath;}}};</td> 
  </tr> 
 </tbody> 
</table>

## 效果 ##

![bf0ae00607d22d6a2e4c2752a063f651.png][]

## key的属性作用 ##

### 1. 不设置router-view的key属性 ###

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

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

*  从/page/1 => /page/2, 由于这两个路由的$route.path并不一样, 所以组件被强制不复用, 钩子加载顺序为:beforeRouteUpdate => created => mounted
 *  从/page?id=1 => /page?id=2, 由于这两个路由的$route.path一样, 所以和没设置 key 属性一样, 会复用组件, 钩子函数只会执行beforeRouteUpdate

### 3. 设置 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

![ba11603e46e62c57741dbf2fccdf8dc5.png][] ![1552de6a4ff176937816dd0e4aef5780.png][]公众号ID： gh\_dcd05cdf3c3e扫码关注最新动态我就知道你“在看” ![b2172408362ecb5c03bc8541bb485028.gif][]

[bf0ae00607d22d6a2e4c2752a063f651.png]: /images/20221024/c4dd933dc3504cca8900a475a064326a.png
[ba11603e46e62c57741dbf2fccdf8dc5.png]: https://img-blog.csdnimg.cn/img_convert/ba11603e46e62c57741dbf2fccdf8dc5.png
[1552de6a4ff176937816dd0e4aef5780.png]: https://img-blog.csdnimg.cn/img_convert/1552de6a4ff176937816dd0e4aef5780.png
[b2172408362ecb5c03bc8541bb485028.gif]: /images/20221024/b234c1b9464a40e8bda12a2278364c95.png