Vue的一级路由和二级路由

1、package.json包中


2、在main.js中引用



其次:一级路由的配置

import Vuefrom 'vue';

import Routerfrom 'vue-router';

Vue.use(Router);

export default new Router({

//去除路径中的#标志

  mode:"history",

//以及路由

routes: [

{

//专题详情页面

  path:'/c/:id',

component: resolve => require(['../components/common/ZhuanTi.vue'], resolve),

meta: {title:'专题详情'}

},

{

//文章详情页面

  path:'/p/:id',

component: resolve => require(['../components/common/Essay.vue'], resolve),

meta: {title:'文章详情'}

},

{

// 个人中心组件

  path:'/u',

component: resolve => require(['../components/page/User.vue'], resolve),

meta: {title:'个人中心'}

},

]

最后:二级路由的配置

import Vuefrom 'vue';

import Routerfrom 'vue-router';

Vue.use(Router);

export default new Router({

//去除路径中的#标志

  mode:"history",

//一级路由

  routes: [

{

//消息组件(一级路由)

  path:'/notifications',

component: resolve => require(['../components/page/Notifications.vue'], resolve),

meta: {title:'消息'},

//二级路由开始

children:[

{

path:'/comments',

component: resolve => require(['../components/pinglun/PingLun.vue'], resolve),

meta: {title:'评论'},

},

{

path:'/chats',

component: resolve => require(['../components/pinglun/JianXin.vue'], resolve),

meta: {title:'简信'},

},

{

path:'/requests',

component: resolve => require(['../components/pinglun/TouGao.vue'], resolve),

meta: {title:'投稿请求'},

},

{

path:'/likes',

component: resolve => require(['../components/pinglun/Like.vue'], resolve),

meta: {title:'喜欢和赞'},

},

{

path:'/follows',

component: resolve => require(['../components/pinglun/GuanZhu.vue'], resolve),

meta: {title:'关注'},

}

{

path:'/others',

component: resolve => require(['../components/pinglun/TiXing.vue'], resolve),

meta: {title:'提醒'},

}

]

},

]

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容