Vue Router

透過 Vue Router 我們可以製作出多視圖的單頁應用程式也就是 SPA，現在先讓我們看看該怎麼使用吧！

如何使用

這邊先用 vue-cli 建立一個新專案，然後可以利用 npm 的方式安裝 vue router ，或是用 CDN 的方式載入，這裡我使用 npm。

npm install vue-router --save-dev

• --save 可以將套件加入到 package.json 檔中。
• -dev 則是將套件加入到 devDependencies 中，若沒輸入則加入到 dependencies 中。

基本設置

src/router/index.js //資料結構，在 src 下建立 router 資料夾，並在裡面建立 index.js

import Vue from 'vue';
import VueRouter from 'vue-router'; //載入 vue-router
import Home from "@/components/HelloWorld";

Vue.use(VueRouter) //使用 vue-router

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

src/main.js //注入點的配置

import Vue from 'vue'
import App from './App'
import router from "./router" //引入 router

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
  router //使用 router
});

這裡要注意的是，需要先在 src 資料夾下再建立一個 router 的資料夾，然後建立一個 index.js 的檔案，檔案內容的基本配置就如上面，記得也要在進入點的 main.js 加入 router 唷！
這時運行 npm run serve 的時候打開頁面會發現網址變成了
http://localhost:8080/#/

再來我可以在 App.vue 中做一點改變。

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

這裡我是將原本的 HelloWorld 改成上面的 router-view，然後我們再去 router 資料夾中的 index.js 做一點更動。

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "@/components/HelloWorld";

Vue.use(VueRouter)

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

將虛擬路徑改成 /index 之後運行，這時你會看到 http://localhost:8080/#/ ，只剩一張圖片，如果我們將 URL 改成 http://localhost:8080/#/index，就會看到原本的頁面囉，打開 Vue 的開發者工具看一下，可以看到原本的HelloWorld 還在，但是後面多了 router-view ，到這裡基本配置就完成囉！

那麼，明天再見囉！