Vue中如何配置路由
-
在json數(shù)據(jù)中加入路由配置
image.png -
在main.js中也將路由加入
image.png - 最后要在router文件夾中index.js中配置路由
path中填具體路徑
component中填跳轉(zhuǎn)頁(yè)面的位置
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
//首頁(yè)組件
path: '/',
redirect: '/index',
component: resolve => require(['../components/common/Home.vue'], resolve),
meta: {title: '首頁(yè)'},
children: [
{
path: '/index',
component: resolve => require(['../components/page/Index.vue'], resolve),
meta: {title: '關(guān)注'}
},
{
//關(guān)注組件
path: '/subscriptions',
component: resolve => require(['../components/page/Subscriptions.vue'], resolve),
meta: {title: '關(guān)注'}
},
{
//消息組件
path: '/notifications',
component: resolve => require(['../components/page/Notifications.vue'], resolve),
meta: {title: '消息'}
},
{
//所有用戶(hù)組件
path: '/users',
component: resolve => require(['../components/page/Users.vue'], resolve),
meta: {title: '所有用戶(hù)'}
},
{
//所有專(zhuān)題組件
path: '/collections',
component: resolve => require(['../components/page/Collections.vue'], resolve),
meta: {title: '所有專(zhuān)題'}
},
{
//專(zhuān)題詳情
path:'/c/:id',
component:resolve=> require(['../components/page/Collection.vue'],resolve),
meta:{title:'專(zhuān)題詳情'}
},
{
// 個(gè)人中心組件
path: '/u',
component: resolve => require(['../components/page/User.vue'], resolve),
meta: {title: '個(gè)人中心'}
}
]
},
{
// 寫(xiě)文章
path: '/write',
component: resolve => require(['../components/page/Write.vue'], resolve),
meta: {title: '寫(xiě)文章'}
},
{
path: '/comments',
component: resolve => require(['../components/message/Comments.vue'], resolve),
meta: {title: '評(píng)論'}
},
]
})
