1.创建vue3项目,过程省略。
2.删除自动生成的router.js,创建新的router文件夹。
在这里插入图片描述
3.在router文件夹中创建index.js,routes2.js,routes3.js
在这里插入图片描述
(1)index.js

import VueRouter from 'vue-router';
import Vue from 'vue';
import routes1 from './routes1';
import routes2 from './routes2';
Vue.use(VueRouter);
const baseRoutes = [];
const routes = baseRoutes.concat(routes1, routes2);
export default new VueRouter({
    mode: 'history',//去除访问路径“#”
    routes,
});

(2)routes1.js

export default[
    {
        path: '/Login',
        component: () => import ('../views/Login.vue'),
        name: '',
        hidden: true
    },
    {
        path: '*',
        component: () => import ('../views/404.vue'),
        name: '',
        hidden: true
    },
    {
        path: '/',
        component: () => import ('../views/Home.vue'),
        name: '我的快乐',
        iconCls: 'fa fa-heartbeat',//图标样式class
        children: [
            { path: '/HappyPassages',component: () => import ('../views/nav1/HappyPassages.vue'), name: '快乐段子' },
            { path: '/HappyPhoto', component: () => import ('../views/nav1/HappyPhoto.vue'), name: '图片快乐' },
            { path: '/HappyVideo', component: () => import ('../views/nav1/HappyVideo.vue'), name: '快乐视频' },
            { path: '/HappyMotionMap', component: () => import ('../views/nav1/HappyMotionMap.vue'), name: '快乐动图' },
        ]
    },

]

(3)routes2.js

export default[
    {
        path: '/',
        component: () => import ('../views/Home.vue'),
        name: '导航二',
        iconCls: 'fa fa-id-card-o',
        children: [
            { path: '/page4',component: () => import ('../views/nav2/Page4.vue'), name: '页面4' },
            { path: '/page5',component: () => import ('../views/nav2/Page5'), name: '页面5' }
        ]
    },
    {
        path: '/',
        component: () => import ('../views/Home.vue'),
        name: '',
        iconCls: 'fa fa-music',
        leaf: true,//只有一个节点
        children: [
            { path: '/MusicRadios', component: () => import ('../views/nav3/MusicRadios.vue'), name: '热门电台' }
        ]
    },
]

4.在main.js中引入index.js
在这里插入图片描述
5.最终效果
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐