首先：添加相关依赖
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:'提醒'},
}
]
},
]