首先：添加相关依赖

1、package.json包中

1.jpg

2、在main.js中引用

2.jpg
1540167233(1).jpg

其次：一级路由的配置

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:'提醒'},

}

]

},

]