以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写）
- nested
- menu1
- menu1-1
- menu1-2
- menu1-2-1
- menu1
const nestedRouter = {
path: '/nested',
component: Layout,
redirect: '/nested/menu1/menu1-1',
name: 'Nested',
meta: {
title: 'Nested Routes',
icon: 'nested'
},
children: [
{
path: 'menu1',
component: () => import('@/views/nested/menu1/index'), // Parent router-view
name: 'Menu1',
meta: { title: 'Menu 1' },
redirect: '/nested/menu1/menu1-1',
children: [
{
path: 'menu1-1',
component: () => import('@/views/nested/menu1/menu1-1'),
name: 'Menu1-1',
meta: { title: 'Menu 1-1' }
},
{
path: 'menu1-2',
component: () => import('@/views/nested/menu1/menu1-2'),
name: 'Menu1-2',
redirect: '/nested/menu1/menu1-2/menu1-2-1',
meta: { title: 'Menu 1-2' },
children: [
{
path: 'menu1-2-1',
component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
name: 'Menu1-2-1',
meta: { title: 'Menu 1-2-1' }
},
]
}
]
}
]
}
1. 在三级路由根页面中的created方法内，将根页面的名称加入到state.tagsView.cachedViews。这样3级路由页面就可以进行缓存了
都加这句话
created() {
const route = this.$route.matched.find(item => item.name === this.$options.name)
this.$store.dispatch('tagsView/addCachedView', route)
},
比如三级路由的menu1-1页面
<template>
<div class="checked">
全选
<el-checkbox v-model="checked"></el-checkbox>
</div>
</template>
<script>
export default {
name: "Menu1-1",
data() {
return {
checked: false,
};
},
created() {
const route = this.$route.matched.find(item => item.name === this.$options.name)
this.$store.dispatch('tagsView/addCachedView', route)
},
};
</script>
<style scoped lang="scss">
.checked {
margin: 50px;
}
</style>
<template>
<div class="checked">
全选<el-checkbox v-model="checked"></el-checkbox>
</div>
</template>
<script>
export default {
name:'Menu1-2-1',
components: {
},
props: {
},
data() {
return {
checked:false,
};
},
computed: {
},
watch: {
},
created() {
const route = this.$route.matched.find(item => item.name === this.$options.name)
this.$store.dispatch('tagsView/addCachedView', route)
},
mounted() {
},
methods: {
},
};
</script>
<style scoped lang="scss">
.checked{
margin: 50px;
}
</style>
