vue中拆分子组件和子路由的步骤

原理：利用import和export 也就是导入和导出

一、vue中拆分子组件

1

import cxHeader from "./Header.vue";

import cxSlider from "./Slider.vue";

2. <cx-header></cx-header>

3.

export default {

  components: {

    cxHeader,

    cxSlider,

  },

};

1)layout中

 

2)Header.vue

 

3)Slider.vue中

二、vue中拆分子路由

1）

import adminRoute from "./admin"

import protalRoute from "./protal"

// redirect路由重定向  值和子路由中path名相同

const routes = [

    ...adminRoute,

    ...protalRoute

]

const router = new VueRouter({

    routes

})

2）在admin.js中

// 后台路由
import Layout from '../views/layout/Layout.vue'
import Home from "../views/Home.vue"
//用户管理
import User from "../views/user/User.vue"
import AddUser from "../views/user/AddUser.vue"
//分类管理
import Classify from "../views/classify/Classify.vue";
import AddClassify from "../views/classify/AddClassify.vue";
// 菜单管理
import Menu from "../views/menu/Menu.vue"
import AddMenu from "../views/menu/AddMenu.vue"
// 文章管理
import Artical from "../views/artical/Artical.vue"
import AddOrEditArtical from "../views/artical/AddOrEditArtical.vue"
//banner管理
import Banner from "../views/banner/Banner.vue"
import AddBanner from "../views/banner/AddBanner.vue"
// mannger管理
import Manager from "../views/manager/Manager.vue"
// 用户后台登录
import Login from "../views/login/Login.vue"

//后台路由
const adminRoute = [
    // 后台路由
    { path: '/', redirect: '/admin' },
    {
        path: '/admin', //一级路由
        redirect: '/admin/dashboard',
        component: Layout,
        children: [{ path: 'dashboard', name: 'home', component: Home, meta: { name: '首页' } }]
    },
    //后台登录
    {
        path: '/admin/login',
        name: 'adlogin',
        component: Login,
    },
    // 用户管理
    {
        path: '/admin/user',
        component: Layout,
        children: [
            { path: 'index', name: 'user', component: User, meta: { name: '用户列表' } },
            { path: 'adduser', name: 'adduser', component: AddUser, meta: { name: '添加用户' } }
        ]
    },
    //分类管理classfiy和addclass
    {
        path: '/admin/classify',
        component: Layout,
        children: [
            { path: 'index', name: 'classify', component: Classify, meta: { name: '分类列表' } },
            { path: 'addclassify', name: 'addclassify', component: AddClassify, meta: { name: '添加分类' } }
        ]
    },
    {
        path: '/admin/menu',
        component: Layout,
        children: [
            { path: 'index', name: 'menu', component: Menu, meta: { name: '菜单列表' } },
            { path: 'addmenu', name: 'addmenu', component: AddMenu, meta: { name: '添加菜单' } }
        ]
    },
    //文章管理
    {
        path: '/admin/artical',
        component: Layout,
        children: [
            { path: 'index', name: 'artical', component: Artical, meta: { name: '文章列表' } },
            { path: 'changeartical', name: 'changeartical', component: AddOrEditArtical, meta: { name: '添加文章' } }
        ]
    },
    //banner管理 
    {
        path: '/admin/banner',
        component: Layout,
        children: [
            { path: 'index', name: 'banner', component: Banner, meta: { name: '轮播图列表' } },
            { path: 'addbanner', name: 'addbanner', component: AddBanner, meta: { name: '添加轮播图' } }
        ]
    },
    //manager管理
    {
        path: '/admin/manager',
        component: Layout,
        children: [
            { path: 'index', name: 'manager', component: Manager, meta: { name: '管理列表' } },
        ]
    },
    {
        path: '*',
        component: Layout,
        redirect: '/404',
        children: [{
                path: '/404',
                name: '404',
                component: () =>
                    import ("@/views/error/404.vue")
            },

        ]
    }
]

export default adminRoute;

3)protal.js中

    //前台路由
    import PortalLogin from "../views/portal/login/Login.vue"
    import PortalRegister from "../views/portal/register/Regiter.vue"
    import ProtalLayout from "../views/portal/index/Layout2.vue"
    import Index from "../views/portal/index/Index.vue"
    import Detail from "../views/portal/detail/Detail.vue"
    import Send from "../views/portal/send/Send.vue"

    const protalRoute = [
        //前台路由
        {
            path: '/',
            redirect: '/index',
            component: ProtalLayout,
            children: [
                { path: '/index', name: 'index', component: Index },
                { path: '/detail', name: 'detail', component: Detail },
                { path: '/send', name: 'send', component: Send }
            ]
        },
        {
            path: '/login',
            name: 'login',
            component: PortalLogin
        },
        {
            path: '/register',
            name: 'register',
            component: PortalRegister
        },

    ]
    export default protalRoute;