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

│

//預設程式入口

│ main.js

│

1、開啟main.js:

1 import vue from 'vue'
3 import router from './router'
45 vue.config.productiontip = false67
/*eslint-disable no-new */8
newvue()

render是vue2新增的具有特色的方法，為了得到更好的執行速度，vue2也採用的類似react的virtual dom（虛擬dom）

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

3、開啟router/index.js配置路由

1 import vue from 'vue'
2 import router from 'vue-router'
34 import singer from '@/components/rank/rank'
56 vue.use(router) //
註冊router
78 export default
newrouter(,
1520
]21 })

："mode"，"history模式"，"hash模式"，"abstract模式"如果不使用history模式，當訪問rank的時候路由就會變成：

反之為：

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

："router-link","router-view"

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

我們使用整兩個標籤元件來完成乙個簡單的頁面布局：

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

在router-link通過名稱引用路由：向to屬性傳入乙個物件顯式的宣告路由的名稱：

這裡留意使用v-bind繫結（簡寫：），因為這裡需要向router-link傳遞的是乙個物件而不是乙個字串

："動態路由引數"，"params"，"$router.params"

vue-router將引數融入到路由的路徑定義之內成為路由的一部分，我們稱這種引數為"動態路徑引數"；

使用非常簡單，在引數名之前加上":"，然後將引數寫在路由定義的path內，

routers：

1、這樣定義之後，vue-router就會自動匹配/books/1、/books/2、...、/books/n 形式的路由模式，因為這樣定義的路由的數量是不確定的，所以也稱為"動態路由"。

2、在中我們就可以加入乙個params的屬性來指定具體的引數值：

12//

...3

3、當我們導航進入圖書詳情頁之後，我們可能需要獲取屬性指定的引數值（即重新將:id引數讀取出來），我們可以通過$router.params來完成：

1 export default
5 }

："children"，

我們利用下面的場景，首頁/home/讀書詳情頁面，讀書詳情也我們不需要底部的導航區域，但是我們使用之前的路由定義，所有的頁面都應該具有想用的底部導航條，按前面的路由結構是不可以導航到圖書詳情頁的，如下：

所以我們就需要另一種定義路由的方式，對前面的路由進行調整，

巢狀式路由又叫做子路由，要將路由顯示到子檢視中就要相應的子路由與之對應，我們只需要在路由定義中使用children陣列屬性就可以定義子路由了：

1
routers:[
28 
9] 
10},
11 
12 ]

需要注意的是以"/"開頭的巢狀路徑會被當做根路徑，所以不要在子路由上加上"/"；

："redirect"，"alias"

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

routes: [
]//重定向的目標也可以是乙個命名的路由
routes: [}]

另外我們需要區別重定向和別名，『重定向』的意思是，當使用者訪問/a時，url 將會被替換成/b，然後匹配路由為/b，那麼『別名』又是什麼呢？

/a的別名是/b，意味著，當使用者訪問/b時，url 會保持為/b，但是路由匹配則為/a，就像使用者訪問/a一樣：

利用alias給路由設定別名

routes: [
]

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

起步 vue router路由與頁面間導航

前端路由與vue router

vue router 動態路由與巢狀路由

vue router路由巢狀

起步 vue router路由與頁面間導航

前端路由與vue router

vue router 動態路由與巢狀路由

vue router路由巢狀

相關推薦