今天要講的東西非常的實用，曾經我還是開發小盟新時去找了一個實習，結果他問我~ 你知道router是甚麼嗎....
我竟然跟他說: 「知道! 是路由器~」
雖然router真的是基地台，但他想問的是網頁的routing...

前言

在講到routing 之前要先帶各位看一下網址這個東西，如果你有印象的話~網址通常都是這個格式:

https://ithelp.ithome.com.tw/

而今天假設我要點進去文章的頁面~ 那網址就會變這樣

https://ithelp.ithome.com.tw/articles/

基本上就是多一個 articles在後面~ 所以網站上面要呈現甚麼頁面都是由網址來定義的，納今天我們也可以定義網址，告訴網頁說ㄟ我今天後面如果加了一個 articles就是要你前往articles的頁面喔~

先來看基本routing

最基本的routing就是直接在 main.js裡面定義一個variable 叫做 routes

const Home = { template: '<h1>home page</h1>' }
const Intro = { template: '<p>Intro page</p>' }

const routes = {
  '/': Home,
  '/intro': Intro
}

new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      return routes[this.currentRoute]
    }
  },
  render (h) { return h(this.ViewComponent) }
})

我們可以看到我們在routes裡面定義的

1. '/' => 就是當今天一點進網頁的home page
2. '/about' 當我們今天網址後面多了一個**/about**時要導到 About這個頁面

再來看看進階用法

其實也部是進階用法~ 只是說我們可以用一個 JavaCeript來去定義所有的 route，而我們的project就會使用這個辦法，所以來帶各位實做一次

1. Routes.js

首先~ 我們先來創一個 routes.js，他會在src folder裡面，跟main.js在同一位置~


好接下來就先不要管它了~XDXD

2. Import vue-router~

我們接下來進去main.js 去告訴這個project說今天我們有把 Router放在 routes.js這個檔案裏面~

但在那之前我們要先import Vue Router，之後再來引進自己剛剛開的 routes.js

import VueRouter from "vue-router";
import Routes from './routes';

然後記的要 Use一下你import進來的東西~

Vue.use(VueRouter);

3. History Mode

這個東西就是看你自己想不想要用的了~ 因為他最主要是可以讓你的網址變得更美觀

假設今天你沒有用history mode那網址會變成這個樣子:

http://localhost:8080/#/Intro

沒錯~ 就會多一個 # hash，這個東西是拿來模擬一個真正的URL，這樣頁面就不會在url更動的時候reload~ 但是我們今天可以在main.js *(就是剛剛 Vue.use()底下)*寫一串code:

const router = new VueRouter({
  routes: Routes,
  mode: "history",
});

這樣我們的網址就會沒有#了~看起來漂亮多了lol
所以目前我們的main.js應該會長這樣:

import Vue from 'vue';
import App from './App.vue';
import { BootstrapVue, IconsPlugin } from "bootstrap-vue";
import VueRouter from "vue-router";

import Routes from './routes';

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(VueRouter);

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.config.productionTip = false


const router = new VueRouter({
  routes: Routes,
  mode: "history",
});

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

定義一下 routes.js

如果你有照這之前做的那個 home.vue的話 (https://ithelp.ithome.com.tw/articles/10235691) 那你應該會有一個home.vue在你的components裡面~ 那接下來我們就要告訴routes.js 說: 今天一進去網頁('/')就要出現 home page~

import homePage from './components/Home.vue';

export default [
  { path: "/", component: homePage },
];

記得一樣要先import這個Home.vue先~ 之後才可以在底下用到他喔~

後記

今天原本想要帶到navigation bar 的~ 但是沒關係，感覺今天的東西已經夠多，需要時間消化了~ 況且今天是Sunday，把握青春去玩吧各位XDXD

對了~ 如果你npm run serve出來之後她顯示error~ 說找不到vue-router，那不用緊張，打開你的terminal然後下載
npm install vue-router 就可以囉~