文件结构梳理（一）——路由文件抽离

文件结构梳理（一）——路由文件抽离

1、在src/main.js中

import router from './router'

2、在src/router/index.js中

import Vue from 'vue'
import VueRuter from 'vue-router'

import { adminRouter } from './admin'  // 后台系统
import {modelData} from './modelData'  // 导入抽离的路由

Vue.use(VueRouter)

const routes = [{
    path:'/',
    name:'Login',
    components:()=> import('@/views/login.vue'),
},{
    path:'/modelData',
    name:'模型数据',
    redirect:'modelData/modelVersion',
    component:()=>import('@/views/Home.vue'),
    children:modelData   //使用抽离的路由
}]

3.1、写法一——新建src/router/admin.js文件

export const adminRouter = [
  // 后台管理
  {
    path: '/admin',
    name: 'admin',
    component: () =>
      import('@/admin/index'),
    beforeEnter: requireAuth,
    children: [{
        path: 'index',
        name: 'adminIndex',
        meta: {
          key: "sub1",
          title: "管理",
          // icon: "read"
          icon: "iconfalv2",
          isAL: true
        },
        component: () =>
          import('@/admin/law-manage/index'),
        children: [{
          path: "upload-law",
          name: "uploadLaw",
          meta: {
            title: "子类",
            //   icon: "copy"
          },
          component: () =>
            import('@/admin/law-manage/children/upload-law')
        }],
      }
    ]
  },
]

3.2、写法二——新建src/router/modelData/index.js文件

const modelData = [
    //通过name关联路由
    {
        path:'modelVersion',
        name:'模型版本',
        components:()=>('@/views/modelData/modelManage/modelVersion.vue')
    }
]

export default modelData

抽离路由效果