[列表——＞详情] 同一页面下，切换不同组件，路由发生变化，但是数据不重载

在同一页面下，切换不同组件，路由发生变化，但是数据不重载

在嵌套路由时容易出现的问题：
列表——>详情 问题：

​ 当列表和详情在同一父组件视图下时，详情是通过‘子路由’引入的，此时修改路由/detail/1,/detail/2,detail组件只被加载一次，路由组件不会因为路由的变化，而重载。

​ 这是由于Vue底层虚拟DOM比较导致的，对detail组件进行了缓存，这会导致detail组建内的生命周期函数不会重新调用，data不会重新初始化，看到的现象就是：更新路由，数据视图不变化，刷新一下才会变化

有两种解决办法：
​ 1，另一种做法：是为router-view提供一个独立key,让每次detail组件都被进行重载

<template>
  <div class="flex">
      <ul>
        <li v-for="i in 3" :key="i" @click="$router.push({
    
    
           name:'detail',
           params:{
    
    id:i}
        })">列表{
    
    {
    
     i }}</li>
      </ul>
      <div class="container">
      //key的值与路由相同，容易区分，也可以是其他随机值
        <router-view :key="$route.path"></router-view>
      </div>
  </div>
</template>

2，vue-router官方推荐：在detail组件中对 $router进行watch，将业务代码都写在监听中（优点：组件不重载，数据可以局部更新，性能效率高，缺点：代码编写容易混乱）

export default {
    
    
// 详情业务
  data () {
    
    
    return {
    
    
      count: '详情页面' + this.$route.params.id
    }
  },
  created () {
    
    
    alert('create')
  },
  mounted () {
    
    
    alert('mounted')
  }
  监听路由，重载页面
  watch: {
    
    
    $route (newVal, oldVal) {
    
    
      alert(newVal.fullPath)
      this.count = '详情页面' + this.$route.params.id
      alert('create')
      alert('mounted')
    }
  }
}