vue-router 三级路由创建

#vue多级路由创建

1.需求

2.实现

import Layout from '@/layout'

const msgcenterRouter = {
  path: '/sendMsg',
  component: Layout,
  redirect: '/sendMsg/wxapp/list',
  name: '消息中心',
  meta: {
    title: '消息中心',
    icon: 'nested',
    hasPerm: ['msgcenter']
  },
  children: [
    {
      path: 'wxapp',
      name: 'wxapp',
      meta: { title: '微信管理', hasPerm: ['msgcenter-wxapp'], icon: 'el-icon-chat-dot-round' },
      component: () => import('@/views/sendMsg/wxapp/index.vue'),
      redirect: '/sendMsg/wxapp/list',
      children: [
        {
          path: 'list',
          component: () => import('@/views/sendMsg/wxapp/list.vue'),
          name: 'list',
          hasPerm: ['msgcenter-wxapp-list'],
          meta: { title: '消息列表', noCache: false, icon: 'el-icon-more' }
        },
        {
          path: 'creatService',
          component: () => import('@/views/sendMsg/wxapp/service/creat.vue'),
          name: 'creatService',
          hasPerm: ['msgcenter:wxapp-list'],

          meta: { title: '创建客服消息' }
        },

      ]
    }
  ]
}

export default msgcenterRouter

3.遇到的问题

• 第二级的子路由需要大于1才能正常显示三级子代路由,
• 第二级需要创建新的页面
• 需要加入router-view路由入口

<template>
  <div>
    <router-view />
  </div>
</template>