Vue动态路由缓存不相互影响的解决办法

import React, { Component } from 'react';

export default calss MainApp extends Component {
 state = {
  student: [
  {
   name: 'Jenny',
   id: 'a001'
  },
  {
   name: 'Jerry',
   id: 'a002'
  },
  ]
 }

 render() {
  return (
   <div>
     <ul>
     {
      this.state.student.map(item => {
       // key是必须的属性，不然浏览器会抛出错误提示
       return (<li key={item.id}>{item.name}</li>) 
      })
     }
     </ul>
    </div>
  )
 }
}

<template>
 <div>
  <ul>
   <!-- key是必须的属性，不然浏览器会抛出错误提示 -->
   <li v-for="itme in student" :key={item.id}>{{item.name}}</li>
  </ul>
 </div>
</template>

<script>
import vue from 'vue';
import { Component } from 'vue-property-decorator'

@Component
export default calss MainApp extends vue {
 student = [
  {
   name: 'Jenny',
   id: 'a001'
  },
  {
   name: 'Jerry',
   id: 'a002'
  },
 ]
}
</script>

<template>
 <div id="app">
  <div>
   <keep-alive>
    <router-view />
   </keep-alive>
  </div>
 </div>
</template>

<script>
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class MainApp extends Vue {
 
}
</script>

{
 path: '/product',
 name: 'product',
 component: Product,
 children: [
  {
   path: 'a',
   name: 'aProduct',
   component: Detail
  },
  {
   path: 'b',
   name: 'bProduct',
   component: Detail
  },
 ]
}

{
 path: '/product',
 name: 'product',
 component: Product,
 children: [
  {
   path: 'detail/:id',
   name: 'aProduct',
   component: Detail
  },
 ]
}