起步 - 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
│  

一、打開main.js:

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 
 5 Vue.config.productionTip = false
 6 
 7 /* eslint-disable no-new */
 8 new Vue({
 9   el: '#app',
10   router,  
11   render: h => h(App)　
12 })

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

Render是vue2新增的具備特點的方法，爲了獲得更好的運行速度，vue2也採用的相似react的Virtual Dom（虛擬Dom）

---

 二、而後咱們在components中註冊幾個組件

三、打開router/index.js配置路由

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 import Singer from '@/components/rank/rank'
 5 
 6 Vue.use(Router)  // 註冊router
 7 
 8 export default new Router({
 9   routes: [
10     {
11       path: '/',
12       name: 'Hello',
13       component: MHeader  // 路由中指定組件
14     },
15     {
16       path: '/rank',
17       name: 'rank',
18       component: Rank
19     }
20   ]
21 })

路由的模式

關鍵詞："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，路由就會強制進入這個模式

路由與導航

關鍵詞："router-link" , "router-view"

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

• <router-view>——渲染路徑匹配到的組件視圖，
• <router-link>——支持用戶在具備路由功能的應用中導航

咱們使用整兩個標籤組件來完成一個簡單的頁面佈局：

　　

在路由使用時要明確一個原則就是：不直接引用路由定義，（即不要在router-link直接經過 to='conpontents/rank/rank' 來導向路由），當顯式引用路由定義的URL一旦發生變化，全部引用的地方都要修改。

在router-link經過名稱引用路由：向to屬性傳入一個對象顯式的聲明路由的名稱：

<router-link :to="{ name:'rank' }">

這裏留意使用v-bind綁定（簡寫：），由於這裏須要向router-link傳遞的是一個對象{ name:'rank' }而不是一個字符串

動態路由

關鍵詞："動態路由參數"，"params"，"$router.params"

vue-router將參數融入到路由的路徑定義以內成爲路由的一部分，咱們稱這種參數爲"動態路徑參數"；

使用很是簡單，在參數名以前加上":"，而後將參數寫在路由定義的path內，

1 routers：[{
2    name:'BookDetails',
3    path:'books/:id',
4    component:BookDetails      
5 }]

一、這樣定義以後，vue-router就會自動匹配/books/一、/books/二、...、/books/n 形式的路由模式，由於這樣定義的路由的數量是不肯定的，因此也稱爲"動態路由"。

二、在<router-link>中咱們就能夠加入一個params的屬性來指定具體的參數值：

1 <router-link :to="{ name:'BookDetails'，params:{ id:1 } }">
2     //...
3 </router-link>

三、當咱們導航進入圖書詳情頁以後，咱們可能須要獲取屬性指定的參數值（即從新將:id參數讀取出來），咱們能夠經過$router.params來完成：

1 export default {
2    created () {
3       const bookID = this.$router.params.id
4    }
5 }

嵌套式路由

關鍵詞："children"，

咱們利用下面的場景，首頁/home/讀書詳情 頁面，讀書詳情也咱們不須要底部的導航區域，可是咱們使用以前的路由定義，全部的頁面都應該具備想用的底部導航條，按前面的路由結構是不能夠導航到圖書詳情頁的，以下：

　　

因此咱們就須要另外一種定義路由的方式，對前面的路由進行調整，

嵌套式路由又叫作子路由，要將路由顯示到子視圖中就要相應的子路由與之對應，咱們只須要在路由定義中使用children數組屬性就能夠定義子路由了： 

 1 routers:[
 2   { 
 3      name:'Main',
 4      path:'/',
 5      component:Main,
 6      children:[
 7         { name:'Home',path:'home',component:Home }
 8         { name:'Me',path:'me',component:Me }
 9       ]   
10    },
11    { name:'BookDetail',path:'/books/:id',component:BookDetail }   
12 ]

須要注意的是以"/"開頭的嵌套路徑會被當作根路徑，因此不要在子路由上加上"/"；

重定向路由與別名

關鍵詞："redirect"，"alias"

重定向也是經過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

 routes: [
    { path: '/a', redirect: '/b' }
  ]

// 重定向的目標也能夠是一個命名的路由

 routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]

另外咱們須要區別重定向和別名，『重定向』的意思是，當用戶訪問 /a時，URL 將會被替換成 /b，而後匹配路由爲 /b，那麼『別名』又是什麼呢？

/a 的別名是 /b，意味着，當用戶訪問 /b 時，URL 會保持爲 /b，可是路由匹配則爲 /a，就像用戶訪問 /a 同樣：

利用alias給路由設置別名

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

總結

到這裏vue路由的基礎咱們已經總結完畢，咱們須要在實戰中不斷練習，多多的去解決問題，方能更好的使用路由 幫咱們完成任務，同時爲vue進階的路由知識打基礎