在创建 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