vue中修改router定义的name值

在创建 Router 实例的时候，在 routes 配置中已经给路由设置名称（https://router.vuejs.org/zh/guide/essentials/named-routes.html），同时页面中也会针对该视图进行命名（https://vue.docschina.org/v2/api/#name）
当我们使用vue的页面缓存机制的时候就可能会出现一个问题，路由定义的name和视图的name不一致，这种情况下就会出现缓存失效的问题，本篇文章就来介绍如何解决该问题。

1.如果是单页面缓存，当然最简单的方法就是修改两个name值保持统一

2.特殊情况，例如A,B,C三个路由跳转同时指向一个视图页面，如图

 

 

 三个列表中对应的页面相同，可能只是权限查看不同，这时我们当然是用多个跳转路由对应一个页面比较方便

1.统一修改视图命名为路由命名

import List from '@/views/list'
import Vue from 'vue'

export default (name) => {
  const component = Vue.extend({ ...List, name })
  return component
}

2.在router中调用

import CusBackListFn from '@/views/list.js'
import Layout from '@/views/layout/Layout'
   const Customer = {
    　　path: '/customer',
    　　component: Layout,
    　　name: 'Customer',
    　　redirect: 'noredirect',
    　　meta: { title: '管理平台', icon: 'el-icon-present'},
    　　children: [
  　　　　{
       　　path: 'list1',
       　　name: 'list1',
       　　component: CusBackListFn('list1'),
       　　meta: { title: '客服列表', icon: 'el-icon-collection'},
     　　},
     　　{
      　　 path: 'list2',
      　　 name: 'list2',
       　　component: CusBackListFn('list2'),
       　　meta: { title: '测试列表', icon: 'el-icon-collection'}
     　　},
     　　{
      　　path: 'list3',
       　　name: 'list3',
       　　component: CusBackListFn('list3'),
      　　 meta: { title: '前端列表', icon: 'el-icon-set-up' }
     　　},
 　　]
 }
export default Customer