Vue中如何配置路由

• 在json數(shù)據(jù)中加入路由配置

 "dependencies": {
    "vue-router": "^3.0.1"
  },

• 在main.js中也將路由加入

    import router from './router'

• 最后要在router文件夾中index.js中配置路由

  • path中填具體路徑
  • component中填跳轉(zhuǎn)頁面的位置

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: "history",
  routes: [
    {
      //首頁組件
      path: '/',
      redirect: '/index',
      component: resolve => require(['../components/common/Home.vue'], resolve),
      meta: {title: '首頁'},
      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: '消息'}
        },
        {
          //所有用戶組件
          path: '/users',
          component: resolve => require(['../components/page/Users.vue'], resolve),
          meta: {title: '所有用戶'}
        },
        {
          //所有專題組件
          path: '/collections',
          component: resolve => require(['../components/page/Collections.vue'], resolve),
          meta: {title: '所有專題'}
        },
        {
          //專題詳情
          path:'/c/:id',
          component:resolve=> require(['../components/page/Collection.vue'],resolve),
          meta:{title:'專題詳情'}

        },

        {
          // 個人中心組件
          path: '/u',
          component: resolve => require(['../components/page/User.vue'], resolve),
          meta: {title: '個人中心'}
        }
      ]
    },

    {
      // 寫文章
      path: '/write',
      component: resolve => require(['../components/page/Write.vue'], resolve),
      meta: {title: '寫文章'}
    },
    {
      path: '/comments',
      component: resolve => require(['../components/message/Comments.vue'], resolve),
      meta: {title: '評論'}
    },

  ]
})