路由是SPA子頁面的跳轉機制，Vue的官方路由是vue-router。

安裝路由

vue-cli在建立專案時有詢問是否建立vue-router，如果選了Y，vue-cli已經將路由安裝好了,可以直接跳過安裝和引入，直接去配置元件；如果選了N，執行

npm install --save-dev vue-router

路由配置

安裝好之後，在router資料夾下的index.js中引入vue和vue-router

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

引用並判斷vue-router外掛是否安裝

Vue.use
 
(Router)

建立路由物件

export default new Router({
  routes: [
    {
      path: '/',
      component： componentName
    }
  ]
})

新增路由元件
將要跳轉的路由新增到路由物件的子物件中，先引入元件到router.js中，再配置到路由。
下面將三個子元件寫入到路由，預設第一頁顯示firstVue元件：

import Vue from 'vue'
import Router from 'vue-router'
// 跳轉的元件
import firstVue from '@/components/firstVue.vue'
 

import secondVue from '@/components/secondVue.vue'
import thirdVue from '@/components/thirdVue.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      component: firstVue
    },
    {
      path: '/secondVue',
      component: secondVue
    },
    {
      path: '/thirdVue'
 
,
      component: thirdVue
    }
  ]
})

路由引入

安裝配置完成就可以直接將路由引入到當前vue例項去檢測了，在main.js中引入router

import router from './router'

再將router加到當前Vue例項中

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

呼叫路由

vue-router提供了跳轉連結元件router-link和顯示內容元件router-view，呼叫方法如下：

<router-link to="/pathName">link-name</router-link>
<router-view />

修改App.vue檔案的template即可點選檢視切換效果

<template>
  <div id="app">
    <router-link to="/firstVue">FirstVue</router-link>
    <router-link to="/secondVue">secondVue</router-link>
    <router-link to="/thirdVue">thirdVue</router-link>
    <router-view/>
  </div>
</template>

本人才疏學淺，如果哪位小夥伴發現問題或者有更好的優化，希望能留言我好及時修改和優化，大家一起學習一起進步，免得被不合理或者錯誤的東西誤導後續看到此博文的小夥伴。