vue-element-admin快捷导航添加

vue-element-admin快捷导航添加

1、在@/layout/components/AppMain.vue中transition标签里添加如下代码:

<keep-alive :include="cachedViews">
  <router-view :key="key"/>
</keep-alive>

然后在script中key()后添加如下代码:

cachedViews(){
  return this.$store.state.tagsView.cachedViews
}

2、首先在@/layout/components下添加TagsView文件,可以到vue-element-admin下载集成方案，找到\layout\components下TagsView文件复制即可

其次，在@/store/modules下添加permission.js和tagsView.js两个文件，同样可以在集成方案中\store\modules下复制即可

之后在@/store/modules下getting.js文件中添加如下代码：

visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
permission_routes: state => state.permission.routes

3、在@/layout/components下的index.js中添加如下代码：

export { default as TagsView } from './TagsView'

然后在@/layout下的index.vue中添加TagsView,修改如下：

最后在@/store下的index.js中作如下修改：

最终效果

##首页可以添加affix: true将其定住

{
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '首页', icon: 'dashboard', affix: true }
    }]
  },