一.速識概念：

1. 后端路由：

1.根據不同的用戶URL請求,返回不同的內容,本質上是URL請求地址與服務器資源之間的對應關系。

2.但是呢，后端渲染存在性能問題。

2. 前端路由：

3.所以出現了Ajax前編渲染 ，前端渲染能提高性能，但是不支持瀏覽器的前進后退操作。

4.這時又出現了SPA (Single Page Application)單頁面應用程序，整個網站只有一個頁面，內容的變化通過Ajax局部更新實現、同時支持瀏覽器地址欄的前進和后退操作。

5.SPA實現原理之一就是基于URL地址的 hash (hash的變化會導致瀏覽器記錄訪問歷史的變化、但是hash的變化不會觸發新的URL請求) 。在實現SPA過程中， 其中最核心的技術點就是前端路由。

6.前端路由就是根據不同的用戶事件，顯示不同的頁面內容。本質就是用戶事件與事件處理函數之間的對應關系。

3.Vue Router：

這是官方使用文檔鏈接。：https://router.vuejs.org/zh/guide/#javascript

Vue Router是Vue.js 官方的路由管理器。它和Vue.js的核心深度集成，可以非常方便的用于SPA應用程序的開發。

它的功能如下：

1.支持HTML5歷史模式或hash模式。

2.支持嵌套路由。

3.支持路由參數。

4.支持編程式路由。

5.支持命名路由。

二.基本使用:

前提：

下面將會以一個HTML單頁面演示Vue Router的基本使用步驟。在vue項目里也是一樣的原理。

當前單頁面基本代碼：

可以看到什么都沒有：

下面開始使用的具體步驟：

1.引入相關的文件：

單頁面肯定得先導入vue文件與vue-router文件，這樣我們才能夠使用路由。

5.配置路由規則井創建路由實例：

routes是路由規則數組。每個路由規則都是一個配置對象， 其中至少包含path 和component 兩個屬性，path 表示當前路由規則匹配的hash 地址，component 表示當前路由規則對應要展示的組件。簡單來說就是你點擊那個鏈接對應的地址要對應的是哪個內容的組件。path跟router-link標簽里的地址要一樣，別寫錯了。

const router = new VueRouter({ routes: [ {path:'/page1',component:Page1 }, {path:'/page2',component:Page2 } ] })

6.把路由掛載到Vue根實例中：

為了能夠讓路由規則生效，必須把路由對象掛載到vue 實例對象上。

const app = new Vue({ el:"#app", data: {}, router })

7.效果與單頁面代碼：

以上我們就大工告成~

上面的完整代碼：

三.路由重定向：

路由重定向指的是用戶在訪問地址A的時候,強制用戶跳轉到地址B，從而展示特定的組件頁面。

通過路由規則的redirect屬性,指定一個新的路由地址，可以很方便地設置路由的重定向。

{path:'/..',redirect: '/...'}

其中path表示重定向的原地址，redirect表示新地址。

比如第二大點的案例中，剛打開的頁面如下，在根目錄，但我們想一進入就顯示page1，那就給根目錄重定向。

修改路由規則如下：

const router = new VueRouter({ routes: [ {path:'/page1',component:Page1 }, {path:'/page2',component:Page2 }, {path:'/',redirect:'/page1'} ] })

看效果，我沒點擊就默認進入page1了：

四.嵌套路由：

功能如下：

點擊父級路由鏈接顯示模板內容。

模板內容中又有子級路由鏈接。

點擊子級路由鏈接顯示子級模板內容。

比如我們改進第二大點的案例，當點擊page2顯示page2內容時，page2里又有兩個子路由連接，star和moon，當點擊其中一個鏈接時又能顯示對應的star或moon內容。

1.首先給page2組件添加兩個子路由鏈接：

const Page2 = { template: `

` }

此時頁面也把顯示子路由鏈接出來了：

2.給兩個子路由鏈接添加路由填充位：

const Page2 = { const Page2 = { template: `

` }

3.設置兩個子組件star與moon的內容：

const Star = { template: '

我是北極光之夜2號下的star

' } const Moon = { template: '

我是北極光之夜2號下的Moon

' }

4.配置路由規則：

page2的規則除了path和component屬性外，再添加一個children屬性，這個屬性以數組表示，數組里存放其子路由的規則，其規則也是一樣的，套娃套娃。

const router = new VueRouter({ routes: [ {path:'/page1',component:Page1 }, { path:'/page2', component:Page2, children: [ {path: '/page2/star',component:Star}, {path: '/page2/moon',component:Moon} ] } ] })

5.效果與單頁面代碼：

完整代碼：

五. 動態路由匹配：

1.動態匹配路由基本使用：

如果某些路由規則的一部分是一樣的，只有另一部分是動態變化的，那我們可以把這些動態變化的部分形成路由參數，這些參數就叫做動態路由匹配。

簡單來說，你先看下面這些路由鏈接，它們都有/page/，就是后面不一樣：

Page1 Page2 Page3

那該咋配置路由呢？這樣嗎：

const router = new VueRouter({ routes: [ {path:'/page/1',component:Page}, {path:'/page/2',component:Page}, {path:'/page/3',component:Page} ] })

這樣萬一有很多一個個寫豈不是太麻煩了，所以引入參數，在動態改變的部分定義為參數，參數前面有一個冒號,那上面可簡寫成如下，動態部分設為參數 ：id 。

const router = new VueRouter({ routes: [ {path:'/page/:id',component:Page }, ] })

在組件可以通過以下語法獲取當前路由的參數：

$router.params.參數名稱

好，再次修改第二大點的案例完成動態路由匹配：

1.定義路由鏈接：

2.動態配置路由，參數id：

const router = new VueRouter({ routes: [ {path:'/page/:id',component:Page1 }, ] })

3.設置組件內容，并顯示當前路由的參數：

const Page1 = { template: '

我是北極光之夜1號,當前id為：{{$route.params.id}}

' }

看效果：

2.路由組件傳參：

上面的$route與對應路由形成高度耦合，不夠靈活啊，所以可以使用props將組件和路由解耦。簡單來說，好像也沒什么說的，直接看下面實例就能理解了。

const router = new VueRouter({ routes: [ // 設置props，如果props為true，router.params會被設置為組件屬性 {path:'/page/:id',component:Page1,props: true }, ] }) const Page1 = { // 這時就通過props接收參數，快速簡潔的接收參數id和使用它 props: ['id'], template: '

我是北極光之夜1號,當前id為：{{id}}

' }

能達到一樣的效果，且更靈活了，上面記得反過來，先定義組件才配置路由規則，只是為了直觀才這樣寫：

const Page1 = { // 這時就通過props接收參數，快速簡潔的接收參數對象 并顯示 props: ['name','age'], template: `

我是北極光之夜1號,當前id為：{{id}}

---

姓名為：{{name}} ，年齡為：{{age}}

` } const router = new VueRouter({ routes: [ // props為一個參數對象，它會原樣設置為組件屬性， // 里面的自定義的參數都能傳過去，但是id傳不了了 {path:'/page/:id',component:Page1 , props: {name:'auroras',age: 18} } ] })

效果，對象props對象里的能獲取，id就不行了：

這個就什么都能獲取。

const Page1 = { // 這時就通過props接收參數，快速簡潔的接收參數 props: ['name','age','id'], template: `

我是北極光之夜1號,當前id為：{{id}}

---

姓名為：{{name}} ，年齡為：{{age}}

` } const router = new VueRouter({ routes: [ // props為函數，這個對象接收router對象為自己形參， // 里面的自定義的參數和id都能傳過去 {path:'/page/:id', component:Page1 , props: router => ({id: router.params.id,name:'auroras',age: 18}) } ] })

效果：

當前完整代碼：

六.Vue-Router命名路由：

為更加方便的表示路由的路徑，可以給路由規則起一個別名， 即為“命名路由”。

繼續改進上面的案例講解用法：

1.首先給路由規則加一個name屬性，這個就是別名：

const router = new VueRouter({ routes: [ { name: 'user', path:'/page/:id', component:Page1 , props: router => ({id: router.params.id,name:'auroras',age: 18}) } ] })

2.在路由鏈接中使用：

我們把第一個路由鏈接改進，to前面加上冒號，其中name表示匹配的是哪個路由規則，params表示要傳遞的參數，看下面是一樣的效果：

七.編程式導航：

聲明式導航：首先聲明式導航是指用戶通過點擊鏈接完成導航的方式，比如點擊a標簽或者路由鏈接這些完成的跳轉。

編程式導航：編程式導航就是說跳轉是因為我點擊它，它不是鏈接，但是它在JavaScript里調用了某個API也實現了跳轉。

常用的編程式導航API如下：

this.$router.push('要跳轉的hash地址') this.$router.go(n)

push里直接放要跳轉的哈希地址，go方法實現前進和后退，n代表數組，若n為1代表在歷史記錄中前進一位，-1代表在歷史記錄中后退一位。

1. this.$router.push(’ ')：

重寫一個案例，有page1、page2、page3三個路由鏈接，而在page3里有一個按鈕，這個按鈕的作用是點擊后返回顯示page1的內容。這個按鈕可不是聲明式導航里的鏈接，就是一個按鈕。

1.定義普通的路由鏈接：

2.定義3個組件內容，其中給page3組件里放一個按鈕，并綁定點擊事件，在事件里通過API導航到page1：

const Page1 = { template: `

我是北極光之夜1號

` } const Page2 = { template: `

我是北極光之夜2號

` } const Page3 = { template: ``, methods: { goPage1(){ this.$router.push('/page/1') } }, }

3.路由規則：

const router = new VueRouter({ routes: [ {path:'/page/1',component: Page1}, {path:'/page/2',component: Page2}, {path:'/page/3',component: Page3} ] })

4.看效果：

5.完整代碼：

不止href路徑，還可以有以下操作：

//字符串形式（路徑的名稱） router.push('/page1')

//對象的形式 router.push({path: '/page1'})

//也可以傳遞參數，命名的路由 router.push({name: '/page1',parmas:{id: 1}})

//帶查詢參數，變成 /page1?p=id //這個挺實用的，比如在某些音樂網頁，點擊歌單后要導航到另一個該歌單詳細界面，此時要帶id，詳細界面靠此id重新發送請求，請求詳細信息 router.push({parh: '/page1',query:{p: 'id' }})

2. this.$router.go(n)：

改進第1小點的案例，當我page3跳到page1時，page1里又有一個返回的按鈕。我們把n設置為-1，他就會在歷史記錄中后退一位，后退一位就是page3.

修改page1組件內容：

const Page1 = { template: `

`, methods: { goBack(){ this.$router.go(-1) } } }

效果：

八.總結：

想去旅行了。

下次見啦~

Vue

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。