标签：vue name route Menu1 nested menu1 keep 路由

以vue中后台案例页面文件是这样的（路由里面的名称和vue页面中的名称要一致，且必须都要写）

• nested
  • menu1
    • menu1-1
    • menu1-2
      • menu1-2-1

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>

2 .比如四级路由的menu1-2-1页面

<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>

标签：vue,name,route,Menu1,nested,menu1,keep,路由
来源： https://blog.csdn.net/u010227042/article/details/120931046

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。