新增路由路徑

今天要來介紹如何新增路由路徑，並且如何切換頁面，馬上就來看範例吧！

src/components/Page.vue //檔案位置

<template>
  <div class="hello">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'Page',
  data () {
    return {
      msg: 'Hello Vue'
    }
  }
}
</script>

router/index.js //檔案位置

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

import HelloWorld from '@/components/HelloWorld'
import Page from '@/components/Page'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/page',
      name: 'Page',
      component: Page
    },
  ]
})

先在 components 的資料夾內再建立一個新的 .vue 檔，然後裡面的內容隨意就可以，只要看得出差別就好，之後 index.js 檔內的配置要再增加一個路由如上，切記路由路徑不要用大寫英文，之後運行 npm run serve 後，在這個路由下 http://localhost:8080/#/page 就會是剛剛新建的內容唷！

建立路由連結

如果每次切換頁面都要自己去輸入路由的路徑，那這個頁面應該就不會有人想來了吧！所以我們現在要來建立連結，用連結來切換路由的路徑達到切換頁面的效果。

//App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <ul>
      <li>
        <router-link to="/">Home</router-link>
      </li>
      <li>
        <router-link to="/page">Page</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

其實和我們用 a 連結切換頁面的方式是一樣的，只是這裡是用 router-link，並且原本的 href 改為 to 並且輸入要訪問的路徑就好囉！

//App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <ul>
      <li>
        <router-link :to="{name: 'HelloWorld'}">Home</router-link>
      </li>
      <li>
        <router-link :to="{name: 'Page'}">Page</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

這裡在介紹另一種連結的撰寫方式，將原本的 to 改為 :to，然後值是一個物件，物件內容是 name: '要訪問的頁面的名稱'，這裡的名稱就是上面 index.js 中的 name 的值，這樣就可以囉！

那麼，明天再見囉！