vue路由切换，页面不更新?你可以试试这个方法

前言

vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。

问题呈现

父组件，点击class=item的div跳转到相应点的页面

复制代码

子组件，一页音乐播放器,音乐播放结束后跳到下一页

复制代码

路由设置,

    {path: '/Chapter/:id',
      name: 'Chapter',
      component: Chapter,
      children: [
        {path: 'newNormal/:part', name: 'newNormal', component: newNormal},
        {path: 'newReading/:part', name: 'newReading', component: newReading},
        {path: 'newListening/:part', name: 'newListening', component: newListening},
        {path: 'newExplain/:part', name: 'newExplain', component: newExplain}
      ]},
复制代码

如果路由跳转nextPage是从name: 'newNormal'跳转到name: 'newNormal'，只是参数part改变的话，页面就不会更新内容，vue-router会默认你没有跳转到新的页面。

解决方法

在父组件中加入 :key="key" 并给key加入随机数或者时间戳

复制代码

这时候路由就会更新了。不过这也就意味着需要把每个都绑定一个key值。如果我从newNormal跳到newReading不同组件的话，我其实是不用担心组件更新问题的。