vue-Rouer 路由原地跳转

问题

• 当你想通过路径参数的变化来控制，页面内容展示的时候
• 在相同的路径中进行跳转，如果只是参数变化，是不会触发页面内组件的刷新的
  例如：<router-link :to="'/home/params/'+sun+'/123'"> 地址栏传值 </router-link>

解决方案

1.监听当前路径的$route对象，当该对象变化时手动触发数据更新

watch:{
  $route(){
    this.getData(); //当对象改变，执行操作获取新数据
  }   
}

2. 给视图<router-view>添加key属性，把它的值设置为动态随机数（例如New Date()），这样每次都会刷新视图了。

<router-view :key="new Date()"></router-view>

结论

在Vue里，会默认的考虑性能，尽量的减少DOM的重新渲染。

key属性在Vue里用的会很多，下面摘录一段官方说明：

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

在Vue的列表渲染里，可以通过给<li>标签绑定:key属性来使列表进行强行重新渲染，这样即使每一项的内容并没有改变也可以触发DOM的重新排列。

遇到的问题：

[vue-router] missing param for named route "infiniteScroll": Expected "id" to be defined
翻译：[vue router]命名路由“infiniteScroll”缺少参数：应定义“id”

// 1.定义的路由是.
  {path:'/home/newsinfo/:id' ,name: 'newsinfo' , component:newsinfo }
//跳转的地址：
  this.$router.push({
      name: newsinfo,
   });

解析：因为在路由重定义是接收了参数，但是在跳转的时候没有传递参数的原因。只需要在跳转的时候按照规定添加参数即可

代码地址：码云 vue-question 无限滚动 - 首页面