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

前言

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

问题呈现

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

<template>
  <div class="nav">
    <div class="item"
         v-for="(item, index) in dirList"
         :key="index"
         @click="clickItem(item)"
         :style="'backgroundImage: url('+ item.bg_img +')'">
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dirList: []
      }
    },
    methods: {
      clickItem (item) {
        const URL = {
          name: `new${item.type}`,
          params: {part: item.id, fromFlag: this.$route.name}
        }
        this.$router.push(URL)
      }
    }
  }
</script>
复制代码

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

<template>
  <div class="audio">
    <audio ref="audio" :src="voiceUrl"></audio>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dirList: []
      }
    },
    mounted () {
        this.initAudio()
    },
    methods: {
        initAudio () {
        const audio = this.$refs.audio
        audio.addEventListener('ended', () => {
          console.log('音频播放完啦')
          this.nextPage()
        }, false)
      }，
        nextPage () {
          this.$router.push({name: `new${this.nextPageInfo.type}`, params: {part: this.nextPageInfo.id}})
      }
    }
  }
</script>
复制代码

路由设置,

    {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加入随机数或者时间戳

<template>
  <div class="nav">
    <div class="item"
         v-for="(item, index) in dirList"
         :key="index"
         @click="clickItem(item)"
         :style="'backgroundImage: url('+ item.bg_img +')'">
    </div>
    <router-view :key="key"></router-view>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dirList: []
      }
    },
    computed: {
      key () {
        return this.$route.path + Math.random()
      }
    },
    methods: {
      clickItem (item) {
        const URL = {
          name: `new${item.type}`,
          params: {part: item.id, fromFlag: this.$route.name}
        }
        this.$router.push(URL)
      }
    }
  }
</script>
复制代码

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