vue cli3封装路由,配置多个路由页面文件
1.创建vue3项目,过程省略。2.删除自动生成的router.js,创建新的router文件夹。3.在router文件夹中创建index.js,routes2.js,routes3.js(1)index.jsimport VueRouter from 'vue-router';import Vue from 'vue';import routes1 from './routes1...
·
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.最终效果
更多推荐
已为社区贡献8条内容
所有评论(0)