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