詳解vue-router路由與頁間導航

vue-router是Vue.js官方的路由插件，它和vue.js是深度整合的，適合用於建立單一頁面應用程式。 vue的單一頁面應用程式是基於路由和元件的，路由用於設定存取路徑，並將路徑和元件對應起來。傳統的頁面應用，是用一些超連結來實現頁面切換和跳轉的。在vue-router單一頁面應用程式中，則是路徑之間的切換，也就是元件的切換。

vue-router

我們知道路由定義了一系列存取的位址規則，路由引擎會根據這些規則來配對找到對應的處理頁面，然後將請求轉發給頁進行處理。可以說所有的後端開發都是這樣做的，而前端路由是不存在"請求"一說的。

前端路由是找到地址匹配的一個元件或物件將其渲染出來。改變瀏覽器位址不向伺服器發送請求有兩種方法，

一是在地址中加入#以欺騙瀏覽器，地址的改變是由於正在進行頁內導航；二是使用HTML5的window. history功能，使用URL的hash來模擬一個完整的URL。

vue-router是一套專用的路由工具庫，是vue的一個插件，我們需要在全域參考中透過vue.use()將它引入vue實例中，

使用vue-cli建立專案後（init初始化時vue-router確認y）

我們先來看看專案src的結構，透過cmd進入項目src目錄下，執行 tree -f > list.txt 產生結構樹（儲存在list.txt中）：

結構如下：

src
├─assets // 静态资源
│ └─image // 图片
│  
├─components // 组件 
│ └─HelloWorld
│  HelloWorld.vue
│  
└─router // 路由配置
│ └─index.js
│ 
│ App.vue // 默认程序入口
│ main.js
│

1、開啟main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router, 
 render: h => h(App)　
})

第10行將設定的路由綁定到vue實例上，第11行在vue實例中使用render方法來繪製這個vue元件(App)完成初始化

Render是vue2新增的具有特色的方法，為了得到更好的運行速度，vue2也採用的類似react的Virtual Dom（虛擬Dom）

 2、然後我們在components中註冊幾個元件

3、開啟router/index.js設定路由

import Vue from 'vue'
import Router from 'vue-router'
import Singer from '@/components/rank/rank'
Vue.use(Router) // 注册router
export default new Router({
 routes: [
 {
 path: '/',
 name: 'Hello',
 component: MHeader // 路由中指定组件
 },
 {
 path: '/rank',
 name: 'rank',
 component: Rank
 }
 ]
})

路由的模式

關鍵字："mode"，"history模式"，"hash模式"，"Abstract模式"

我們可以在建立的Router中使用模式，如參數mode:history的參數，這個值意思是使用history模式，這種模式充分利用了history.pushState API來完成URL的跳轉而無需重新載入頁面，

如果不使用history模式，當造訪rank的時候路由就會變成：

http://localhost/#rank

#反之為：

#http://localhost/rank

這就是history模式和hash模式的區別，除此之外還有一種abstract模式

• Hash：使用URL hash值作為路由，

• History：依賴HTML5 History API和伺服器設定

• Abstract：支援所有JavaScript運行環境，如node伺服器端。如果發現沒有瀏覽器的API，路由就會強制進入這個模式

#路由與導航

vue-router提供兩個指令標籤元件來處理這個導航與自動渲染邏輯：

——渲染路徑匹配到的元件視圖，

——支援使用者在具有路由功能的應用中導航

 routers：[{
 name:'BookDetails',
 path:'books/:id',
 component:BookDetails 
 }]

 <router-link :to="{ name:&#39;BookDetails&#39;，params:{ id:1 } }">
  //...
 </router-link>

 export default {
 created () {
  const bookID = this.$router.params.id
 }
 }

routers:[
 { 
  name:'Main',
  path:'/',
  component:Main,
  children:[
  { name:'Home',path:'home',component:Home }
  { name:'Me',path:'me',component:Me }
  ] 
 },
 { name:'BookDetail',path:'/books/:id',component:BookDetail } 
]

 routes: [
 { path: '/a', redirect: '/b' }
 ]
// 重定向的目标也可以是一个命名的路由
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]

 routes: [
 { path: '/a', component: A, alias: '/b' }
 ]