在專案中，將vue的單頁面應用程式改為了多頁面應用程式，因此在某些場景下，需要頻繁的切換兩個頁面，因此考慮使用路由，這樣會減少伺服器請求。

使用vue-cli（vue腳手架）快速搭建一個專案的模板（webpack-simple）,執行起來後，將原來index.html頁面掛載點中的內容刪除

index.html 

<div id="app">
<!-- 使用 router-link 元件來導航,通過傳入 `to` 屬性指定連結. -->
<!-- <router-link> 預設會被渲染成一個 `<a>` 標籤 -->
<router-link to="/home">
     <button>home</button>
</router-link>
<router-link to="/game">
       <button>game</button>
</router-link>
<!-- router-view 路由出口, 路由匹配到的元件將渲染在這裡 -->
<router-view></router-view>
</div>

router-link會被預設渲染成一個a標籤，如下圖

main.js，定義路由時，將每個路由對映到元件，路由其實也就是引入元件

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//引入兩個元件
import home from "./home.vue"
import game from "./game.vue"
 
//定義路由，將每個路由對映到元件
const routes = [
   { path: "/home", component: home},
   { path: "/game", component: game},
]
//建立路由例項
const router = new VueRouter({routes})
 
new Vue({
   el: '#app',
   data: {
   },
   methods: {
   },
   router
})

home.vue

<template>
    <h3>首頁</h3>
</template>
game.vue
<template>
    <h3>遊戲</h3>
</template>

點選 home 或者 game 按鈕時，就會顯示相應的內容，如下圖：