Vue之路由
今天來看看vue怎麼實現路由功能。
我們在vue-cil腳手架搭建好的基礎上來實現路由功能。如果搭建完初始化項目時沒有路由功能則需在npm安裝路由。命令：
npm install vue-router
然後在main.js中引用路由文件
import router from './router'
並在實例化vue對象是使用他
接下來我們就可以在app.vue中來使用路由功能。我們通過一個簡單的導航模塊來看看怎麼實現路由功能。
首先我們創建header模塊來作爲導航模塊。我們使用boostrap4.0來創建導航欄
然後我們在app.vue中引入header.vue模塊 具體命令：
import Header from '@/components/Header';
然後在components註冊Header組件 ：
就可以直接在app.vue的template中使用Header組件
我們在Header組件下面在寫一個顯示路由內容：<router-view/>
這個代表路由跳轉的內容都顯示在這裏：
接下來我們在src目錄下創建一個router文件夾用來存放路由的地址 並創建index.js文件
首先需要引入vue和vue-router：
import Vue from 'vue'
import Router from 'vue-router'
然後需要再寫 Vue.use(Router) 來讓vue使用路由組件
最後我們註冊需要的每一個路由即可：
這裏的mode：history是路由的 history 模式 讓地址欄去掉“#”，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須重新加載頁面
path是路由的路徑，name是路由名稱，component是指顯示哪一個組件。這裏的component根據上面引入的組件來，需要先引入組件這裏纔可以用，例如：
錄入index組件。
路由註冊好之後，我們在導航欄的超鏈接裏面輸入我們註冊的路由地址即可以在router-view中顯示我們註冊的組件內容
最終效果：
最終利用路由實現導航功能。