To-Do Calendar - Day3 用 Vue Router 配置路由

• 2022/04/17
• 1-minute read
• SideProject

來看一下如何使用 Vue Router 吧！

Vue Router 是什麼？

Vue Router 是由前端所模擬的路由管理器，可以根據網址切換元件的呈現內容。

安裝 Vue Router

• 安裝 vue-router
  Warning

  此專案用的是 Vue 2，所以安裝的是對應的 vue-router v3.x 版本。

  npm install vue-router@3.3.2 --save
  

配置路由

• 在 src 下新建 router 目錄，並在裡面新建 index.js，作為前端路由的配置檔

• 在 src/router/index.js 載入官方元件

  import Vue from 'vue'
  import VueRouter from 'vue-router'
  

• 在 src/router/index.js 載入自定義的分頁元件

  import Home from '@/components/HelloWorld'
  

@ 是 src 路徑的縮寫。

• 啟用 vue-router 元件

  Vue.use(VueRouter)
  

• 匯出路由配置檔到 main.js

  export default new VueRouter({  
  
  });
  

• 在 main.js 載入路由配置檔

  import router from './router'
  

• 將 router 加進 Vue

  new Vue({
    render: (h) => h(App),
    router,
  }).$mount("#app");
  

定義路徑

• 回到 src/router/index.js，在 VueRouter 中新增 routes 陣列，然後在裡面新增路徑與對應的元件

  export default new VueRouter({
    routes: [
        {
            name: 'home', //元件呈現的名稱
            path: '/index', //對應的虛擬路徑
            component: Home //對應元件
        }
    ]
  });
  

使用 router-view

• 回到 App.vue，將原本的 HelloWorld 元件刪掉，加上 router-view，改透過 router-view 的方式來呈現元件內容

   <template>
    <div id="app">
       <router-view></router-view>
    </div>
   </template>
  

• 運行開發環境，測試 Vue Router 是否運作

  

綠色區塊為 Vue Router 根據虛擬路徑，渲染的元件（helloWorld）內容

延伸閱讀

• 重新認識 Vue.js | Vue Router 與前端路由管理

參考資料

• 六角學院 Vue.js 課程