1.安裝vue-router

　　　　npm install vue-router --save

　　　　在package.json檔案中可以看到vue-router的版本號

2.建立 router.js 檔案。使用 Vue Router 一共需要4步：

　　2.1 引入 vue-router

// 在 router.js 寫入以下程式碼
import Vue from 'vue';  //引入vue
import VueRouter from 'vue-router';  //引入vue-router

　　　2.2執行 VueRouter

// 在 router.js 寫入以下程式碼

Vue.use(VueRouter); //第三方庫需要use一下才能用
 

　　2.3. 設定路由配置並引入對應的元件且例項化 VueRouter

// 在 components/page 下建立 Login.vue ，寫入以下程式碼
<!-- 建立Login元件 -->
<template>
  <div class="home-wrap">
    <span>Login元件</span>
  </div>
</template>


// 在 router/index.js 寫入以下程式碼引入對應元件
import vHome from '../components/common/Home.vue';
import vLogin from '../components/page/Login.vue';

（
 
//定義routes路由的集合，陣列型別const routes//例項化VueRouter const router=new VueRouter//丟擲這個這個例項物件方便外部讀取以及訪問export default router）

export default new VueRouter({
  routes: [//單個路由均為物件型別
    {
      path: '/home', // 設定 URL
      component: vHome, // 設定對應元件
      meta: {  // 設定相應元資訊
        title: 'Home元件',
      },
    },
    {
      path: '/login',
      component: vLogin,
      meta: {
        title: 'Login元件',
      },
    },
  ],
});
 

2.4將 VueRouter 掛載到 Vue 例項中

// 在 main.js 寫入以下程式碼
// 引入 VueRouter
import router from './router';

// 例項化 Vue
new Vue({
//一定要注入到vue的例項物件上
  router,
  render: (h) => h(App),
}).$mount('#app');

這樣我們的路由外掛就成功引入並且配置好了。

<!-- 在 App.vue 中修改 template 部分為以下程式碼 -->
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

這個<router-view></router-view>便是我們最頂層的出口，通過路由調控的元件都會被渲染到這個出口位置。

3.需要配置多個路由時，可以對路由配置進行簡化，將引入的元件通過箭頭函式直接掛載到元件上

export default new VueRouter({
  routes: [
    {
      path: '/home',
      component: () => import('../components/common/Home.vue'),
      children: [
        {
          path: 'child',
          component: () => import('../components/page/Children.vue'),
        },
        {
          path: 'child1',
          component: () => import('../components/page/Children1.vue'),
        },
        {
          path: 'child2',
          component: () => import('../components/page/Children2.vue'),
        },
        {
          path: 'child3',
          component: () => import('../components/page/Children3.vue'),
        },
      ],
    },
  ],
});