哲神最近在做VUE开发，开发一个模块需要用到嵌套路由，路由如下：

{
  path: 'dashboard',
  component: () => import('@/views/dashboard/index'),
  name: 'dashboard',
  meta: { title: '数据看板', activeMenuName: 'dashboard', keepAlive: true },
  children: [{
    path: ':dashboardId',
    component: () => import('@/views/dashboard/detail'),
    name: 'dashboard_detail',
    meta: { title: '数据看板详情', activeMenuName: 'dashboard' }
  }]
}

页面如下：

我每次点击左侧树形控件，调用下面这个方法进行路由的切换

this.$router.push({ name: 'dashboard_detail', params: { dashboardId: id } })

然后出现了一个意料之外的问题，VUE总是会把dashboard组件重新加载一遍，导致每次点击树形控件都要重新获取数据，使得树形控件“闪闪发光”。
一级的router-view代码如下：

      <keep-alive>
        <router-view :key="key"/>
      </keep-alive>
      
       computed: {
	    key () {
	      return this.$route.path
	    }
	  }

二级router-view在dashboard组件里，代码如下：

    <div id="right-chart">
      <keep-alive>
        <router-view :key="detailRouterKey"/>
      </keep-alive>
    </div>

然后我真的是百思不得其解。按照VUE官方文档的说法：

dashboard应该被复用的，不应该重新加载。可之前已经被vue的keep-alive和watch的组合BUG坑过一次了：https://segmentfault.com/q/1010000016167912/。因此这次我也选择了不相信VUE，并去网上找到了和我类似的情况：https://segmentfault.com/q/1010000018052821/a-1020000018054700。然后秉持着对VUE BUG“无药可救”的态度，我对路由、对架构进行了一次又一次的思考、整改～～～最终劳而无功。

但是最后，真理的发现权果然都属于那些敢于伟大尝试（瞎B乱改）的人。我把一级router-view的key值从path改成了activeMenuName：

    <keep-alive>
       <router-view :key="key"/>
    </keep-alive>
    
	computed: {
		key () {
			// return this.$route.path
			return this.$route.activeMenuName
		}
	}

然后就OK了。。。。。。。
所以结论是：router-view的key的唯一性会导致“根据参数动态渲染路由”时无法复用组件。想要复用某组件，就保证router-view里按需赋予它该有的key。