vue-element-admin局部刷新页面

在写业务需求的时候遇到了一个帮助文档的需求，里面存在大量静态页面，有考虑几个方案.

1.  组件引入
2. 嵌套路由局部刷新

后面考虑了如果频繁引入组件会导致不好修改。这里就想到了嵌套路由的局部刷新。因为借鉴了友盟,华为云的文档中心Tree树形控件局部刷新。就考虑如何去使用去做.

     vue-element-admin项目大家在使用的时候会发现他会自带一个页面切换动画效应。就算我们写好了局部刷新的路由代码，也会产生动画。这边就在路由的meta属性加了一个showZj参数,true则不刷新,false则刷新，下面贴路由代码

import Layout from '@/layout'
const domRouter = {
  path: '/document',
  component: Layout,
  redirect: '/document/documentCenter',
  name: 'document',
  meta: { title: '文档中心', icon: 'document' },
  children: [
    {
      path: 'documentCenter',
      name: 'documentCenter',
      component: () => import('@/views/document/documentCenter/index'),
      hidden: true
    },
    {
      path: '/document/documentCenter/cloudComputing',
      name: 'cloudComputing',
      component: () => import('@/views/document/cloudComputing/index'),
      hidden: true,
      meta: { title: '弹性伸缩' },
      children: [
        {
          path: '/document/documentCenter/cloudComputing/01',
          name: 'cloudComputing/01',
          component: () => import('@/components/helpDocument/cloudComputing/elasticScaling/productJs/index'),
          hidden: true,
          meta: { title: '产品介绍', showRole: false },
          children: [
            {
              path: '0101',
              name: 'cloudComputing/0101',
              component: () => import('@/components/helpDocument/cloudComputing/elasticScaling/productJs/what/whatEs'),
              hidden: true,
              meta: { title: '什么是弹性伸缩', showRole: true, showZj: true }
            },
            {
              path: '0102',
              name: 'cloudComputing/0102',
              component: () => import('@/components/helpDocument/cloudComputing/elasticScaling/productJs/merit/meritEs'),
              hidden: true,
              meta: { title: '弹性伸缩的优势', showRole: true, showZj: true }
            }
          ]
        }
      ]
    }
  ]
}
//这个操作是白名单路由,不需要token即可访问的路径
var domWhiteList = []
domWhiteList.push(domRouter.redirect)
mapList(domRouter.children)
function mapList(children) {
  children.map(route => {
    if (route.path) {
      domWhiteList.push(route.path)
      if (route.children) {
        mapList(route.children)
      }
    }
  })
}
export default { domRouter, domWhiteList }

这边大家可以看到我的嵌套路由,产品就对应Tree树形控件的父节点,里面就对应子节点，菜单列表，例如:

路由解决完后到页面中去解决局部刷新代码.

因为Tree树形控件刷新如果不通过灵活的数据来展示页面，那么你就会写很多的router.push()以及if()判断,这样子是很蛋疼的。所以在参数中加了id值，每个页面进行分层分级。路由通过name区分。

看到没有,handleNodeClick()方法中id对应路由表中的name最后参数,进行拼接跳转

看代码会在Tree树形控件的点击事件中会出现一个路由跳转的位置，通过name跳转进行拼接。这个时候跳转刷新做完了，但是呢因为vue-element-admin项目本身原因会出现一个动画过渡的效果，因为路由地址改变了。这个时候找到AppMain.vue这个文件打开,如:

使用了vue的API中的transition，这是个动画操作，不懂得可以看这里https://cn.vuejs.org/v2/api/#transition

这个时候就是路由中meta对象中的showZj属性派上用场了。不是帮助文档属性的则使用动画效应，是的则不使用动画，这个时候我们修改一下代码,如:

然后就可以实现Tree菜单栏点击切换页面不会出现Tree树形控件也重新刷新的效果.