《Vue.js基礎(chǔ)與應(yīng)用開發(fā)實(shí)戰(zhàn)(微課版)》配

套教學(xué)教案

單元7

課時內(nèi)容Vue路由配置與應(yīng)用授課時間課時6

?掌握vue-router的基本使用

?掌握重定向和使用別名

?掌握根路徑設(shè)置與使用

?掌握嵌套路由設(shè)置與使用

?掌握命名路由設(shè)置與使用

?掌握命名視圖設(shè)置與使用

教學(xué)目標(biāo)?掌握動態(tài)路由設(shè)置與使用

?掌握編程式導(dǎo)航的實(shí)現(xiàn)

?熟悉導(dǎo)航鉤子函數(shù)使用

?了解懶加載使用

?認(rèn)知vue-router的API

?能實(shí)現(xiàn)用戶登錄與應(yīng)用路由切換頁面，基于“Vue.js+Axios+axios-mock-

ad叩ter”實(shí)現(xiàn)用戶登錄

教學(xué)重點(diǎn)vue-router的使用

教學(xué)難點(diǎn)vue-router的使用

1.教學(xué)思路：由淺入深地介紹Vue路由配置與應(yīng)用。

教學(xué)設(shè)計

2.教學(xué)手段：多媒體展示+軟件操作。

教學(xué)內(nèi)容

7.1vue-router的基本使用

通過vue-router可以實(shí)現(xiàn)當(dāng)用戶單擊頁面的A按鈕時，頁面顯示對應(yīng)的A內(nèi)容；單擊B按鈕時，頁面顯

示對應(yīng)的B內(nèi)容。此時用戶單擊的按鈕和頁面顯示的內(nèi)容是映射的關(guān)系。

7.1.1安裝vue-router

在使用vue?router之前，首先需要安裝該插件，命令如下：

npminstallvue-router

如果在一個模塊化工程中使用vue-router,則必須通過Vue.use()方法明確地安裝路由功能，代碼如下：

importVuefrom'vue'

importVueRouterfrom'vue-rouler'

Vue.use(VueRouter)

如果使用全局的script標(biāo)簽，則無須安裝。

7.1.2使用vue-router

使用Vue配合vue-router創(chuàng)建SPA非常方便，使用Vue可以通過組合組件來組成應(yīng)用程序，再把vue-

router添加進(jìn)來，將組件(Components)映射到路由(Routes),然后告訴vue-router在哪里渲染它們。

【實(shí)例7-1]使用vue-router實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容

【操作要求】

使用vue-router實(shí)現(xiàn)當(dāng)單擊負(fù)面的【登錄】超鏈接時，頁面顯亭對應(yīng)的文本內(nèi)容“打開登錄頁面”；單擊【注

冊】超鏈接時，頁面顯示對應(yīng)的文本內(nèi)容“打開注冊頁面”。

【實(shí)現(xiàn)過程】

創(chuàng)建網(wǎng)頁0701.html,在該網(wǎng)頁中編寫以下代碼實(shí)現(xiàn)要求的功能。

(1)引入庫

<scriptsrc="vue.js"></script>

<scriptsrc="vue-router.js"></script>

(2)使用router-link組件實(shí)現(xiàn)導(dǎo)航

<!-使用router-link組件來導(dǎo)航->

<!-通過t。屬性指定鏈接->

<!-<router-link>默認(rèn)會被渲染成一個<a>標(biāo)簽一〉

<router-linkto=7login">?^</router-link>

<router-linkto="/register">注冊</router-link>

</p>

(3)添加路由出口

<!-路由出口->

<!-路由匹配到的組件將渲染在這里

<router-view></router-view>

(4)如果使用模塊化機(jī)制編程，需要先導(dǎo)入Vue和VueRouter

這里不需要導(dǎo)入Vue和VueRouter,也不需要使用Vue.use(VueRouter),所以以下3行代碼需添加注釋

符號：

IIimportVuefrom'vue'

IIimportVueRouterfrom'vue-router'

IIVue.use(VueRouter)

(5)定義路由組件

constLogin={template:'<div>打開登錄頁面</div>'}

constRegister={template:'<div>打開注冊頁面</div>'}

(6)定義路由

II每個路由應(yīng)該映射一個組件

constroutes=[

{path:'/login',component:Login},

{path:'/register',component:Register}

]

(7)創(chuàng)建router實(shí)例

創(chuàng)建router實(shí)例，然后傳入routes配置，當(dāng)然還可以傳入別的配置參數(shù)：

constrouter=newVueRouter({

routes//(縮寫形式)相當(dāng)于routes:routes

})

(8)創(chuàng)建和掛載根實(shí)例

II要通過router配置參數(shù)注入路由，從而讓整個應(yīng)用都有路由功能

constvm=newVue({

el:'#app',

router

})

打開該網(wǎng)頁時，HTML將被渲染為：

<divid="app">

<P>

<ahref="#/login"class〉登錄v/a>

<ahref="#"egisie「'class>注冊</a>

</p>

</div>

瀏覽網(wǎng)頁0701.html時，單擊【注冊】按鈕顯示對應(yīng)內(nèi)容“打開注冊頁面”，如圖所示。

等錄注冊

打開注冊頁面

單擊【注冊】按鈕顯示對應(yīng)內(nèi)容-打開注冊頁面”

同樣，單擊【登錄】按鈕顯示對應(yīng)內(nèi)容“打開登錄頁面”。該網(wǎng)頁實(shí)現(xiàn)了要求的功能。

7.1.3vue-router的路由模式

Vue實(shí)現(xiàn)單頁面前端路由時，提供了兩種模式，分別是hash模式和history模式。

1.hash模式

vue-router默認(rèn)為hash模式，使用URL的hash來模擬一個完整的URL,當(dāng)URL改變時，頁面不會重

新加載，例如http://localhost:8080/#/logino#就是hash符號，中文名為哈希符或者錨點(diǎn)，在hash符號后的值

稱為hash值。

2.history模式

hash模式的URL中會自帶"#'符號，這樣會影響URL的美觀。使用路由的history模式不會出現(xiàn)'#"符號，

這種模式充分利用history.pushState。方法來完成URL的跳轉(zhuǎn)，并且無須重新加載頁面。使用history模式時，

需要在路由規(guī)則配置中增加mode:'history',示例代碼如下：

constrouter=newVueRouter({

mode:'history',

routes:[...]

))

當(dāng)使用history模式時，完整URL的示例如下：

http://localhost:8080/login

如果要使用history模式，則需要進(jìn)行服務(wù)器配置，如果服務(wù)器沒有正確配置，瀏覽器訪問頁面時可能會

返回404錯誤頁面。所以，要在服務(wù)器端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資

源，則應(yīng)該返回同一個index.html頁面，這個頁面就是App依賴的頁面。

這樣服務(wù)器就不再返回404錯誤頁面，因?yàn)閷τ谒新窂蕉紩祷豬ndex.html頁面。為了避免出現(xiàn)這種情

況，應(yīng)該在Vue應(yīng)用里面覆蓋所有的路由情況，然后再給出一個404錯誤頁面。

例如:

constrouter=newVueRouter({

mode:'history',

routes:(

{path:component:NotFoundComponent}

]

})

7.2重定向和使用別名

7.2.1重定向

Vue的重定向功能通過routes配置path和redirect來完成，下面的代碼是從僅重定向到/home:

constrouter=newVueRouter({

routes:[

{path:7x',redirect:'/home'}

]

})

重定向的目標(biāo)也可以是一個命名的路由，示例代碼如下：

constrouter=newVueKouter({

routes:[

{path:7x',redirect:{name'home'})

]

})

還可以是一個方法，動態(tài)返回重定向目標(biāo)，示例代碼如下：

constrouter=newVueRouter({

routes:[

{path-7x',redirect,to=>{

//方法接收'目標(biāo)路由”作為參數(shù)

//return重定向的字符串路徑/路徑對象

return'/home'

})

]

})

對于無法識別的URL,常常使用重定向功能，將頁面重定向到首頁顯示。

【實(shí)例7-2]使用Vue的重定向功能實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容一

【操作要求】

使用Vue的重定向功能實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容，具體要求如下。

①打開網(wǎng)頁時默認(rèn)顯示文本內(nèi)容“打開網(wǎng)站主頁”。

②單擊頁面的【登錄】超鏈彈時，頁面顯示對應(yīng)的文本內(nèi)容“打開登錄頁面”。

③單擊頁面的【注冊】超鏈展時，頁面顯示對應(yīng)的文本內(nèi)容“打開注冊頁面”。

④單擊頁面的【主頁】和【不存在的健接】超鏈接時，頁面都會顯示文本內(nèi)容，打開網(wǎng)站主頁”，即對于無

法識別的URL,使用重定向功能將頁面重定向到首頁顯示。

【實(shí)現(xiàn)過程】

創(chuàng)建網(wǎng)頁0702.html,在該網(wǎng)頁中編寫以下代碼實(shí)現(xiàn)要求的功能：

<divid="app">

<P>

<router-linkto=7home">±J5</router-link>

<router-linkto="/login”>登錄v/router-link>

<router-linkto=7register">^flfr</router-link>

<router-link不存在的鏈接</router-link>

</p>

<router-view></router-view>

</div>

<script>

constHome={template:'<div>打開網(wǎng)站主頁v/div>'}

constLogin={template:'<div>打開登錄頁面</div>')

constRegister={template:'<div>打開注冊頁面v/div>'}

constNotFound-{template;7die網(wǎng)頁沒有找到《/div〉'}

constroutes=[

{path:'/home',component:Home},

{path:'/login,,component:Login),

{path:'/register*,component:Register},

{path:'**,redirect:'/home"),

]

constrouter=newVueRouter({

routes

})

constvm=newVue({

el:'#app',

router

})

</script>

打開該網(wǎng)頁時，HTML將被渲染為：

<divid="app">

<p>

<ahref="#/home"aria-current="page"

class="router-link-exact-activerouter-link-active">±J5</a>

<ahref="#/login'^class〉登錄v/a>

<ahref="#/registerMclass〉注冊</a>

<ahref="#/*"class〉不存在的鏈接</a>

</p>

<div>打開網(wǎng)站主頁</div>

</div>

打開包含重定向功能的網(wǎng)頁C702.html時，默認(rèn)顯示文本內(nèi)容“打開網(wǎng)站主頁”，如圖所示。

主.科錄注壬不存在的鏈接

打開網(wǎng)站主頁

打開網(wǎng)頁0702.html時默認(rèn)顯示文本內(nèi)容“打開網(wǎng)站主頁”

7.2.2使用別名

重定向是指，當(dāng)用戶訪問/x時，URL將會被替換成/y.然后路由匹配/y。那么別名是什么呢？/a的別名是

ib,意味著當(dāng)用戶訪問/b時，URL會保持為/b,但是路由匹配則為/a,就像用戶訪問/a一樣。

上面對應(yīng)的路由配置為：

constrouter=newVueRouter({

routes:[

{path:7a',component:A,alias:7b'}

]

})

使用別名功能可以自由地將UI結(jié)構(gòu)映射到任意的URL,而不是受限于配置的嵌套路由結(jié)構(gòu)。

處理首頁訪問時常常將index設(shè)置為別名，例如將/home的別名設(shè)置為/index。但是，要注意的是,<router-

linkto="/home">的樣式在URL為/index時并不會顯示，因?yàn)閞outer-link只識別出了home，而無法識別index。

7.3設(shè)置與使用根路徑

設(shè)置與使用根路徑需要將path設(shè)置為/。示例代碼如下。

【示例】demo0701.html

讀者可以掃描二維碼查看【電子活頁7-1】中網(wǎng)頁demo0701.html的代碼，或者從本單元配套的教學(xué)資源

中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。

打開網(wǎng)頁demo0701.html時，HTML將被渲染為：

<divid=',app">

<P>

<ahref="#/"aria-current="page"

class="router-link-exact-activerouter-link-active">主頁v/a>

<ahref="#/login"class〉登錄</a>

<ahref="#/registerMclass>注冊</a>

<ahref="#/*"class〉不學(xué)在的鏈接v/a>

</p>

<div>打開網(wǎng)站主頁</div>

</div>

但是，由于默認(rèn)使用的是全包含匹配，即/login、/register也可以匹配到“/"，如果需要精確匹配，僅匹配

17",則需要在router-link中設(shè)置exact屬性,示例代碼如下。

【示例】demo0702.html

部分有變化的代碼如下：

<P>

<router-linkto=7"exact>index</router-link>

<router-linkto=7loginM>S^</router-link>

<router-linkto=""egister">注冊</router-link>

</p>

constroutes=［

{path:7',component:Home},

{path:'/login',component:Lcgin},

{path:'/register*,component:Register},

］

其他代碼與【示例】dcmo0701.html相同。

7.4設(shè)置與使用嵌套路由

7.4.1使用vue-router實(shí)現(xiàn)嵌套路由

實(shí)際應(yīng)用中的界面通常由多層嵌套的組件組合而成。與之類似，URL中各段動態(tài)路徑也按某種結(jié)構(gòu)對應(yīng)

嵌套的各層組件，例如productDetails/productlo使用vue-router的嵌套路由配置就可以簡單地實(shí)現(xiàn)這種關(guān)

系。嵌套子路由的關(guān)鍵屬性是children,使用children可以像routss一樣去配置路由數(shù)組。每一個子路由里

面可以嵌套多個組件。當(dāng)使用chldren屬性實(shí)現(xiàn)子路由時，子路由的path屬性前不要帶47

【實(shí)例7-3］使用vue-router實(shí)現(xiàn)嵌套路由

【操作要求】

使用vue-router實(shí)現(xiàn)單擊超鏈接顯示對應(yīng)的頁面內(nèi)容，具體要求如下。

①打開網(wǎng)頁時默認(rèn)顯示文本內(nèi)容“打開網(wǎng)站主頁”，單擊頁面的【主頁】超鏈接，也會顯示文本內(nèi)容“打開

網(wǎng)站主頁”。

②單擊頁面的【購物車】超鏈接時，頁面顯示對應(yīng)的文本內(nèi)容'打開購物車頁面

@單擊頁面的【商品詳情】超鏈接時，頁面顯示第2層超鏈接“商品1”“商品2”“商品3”，單擊第2層超鏈

接，打開對應(yīng)商品的詳情頁面，這里會顯示對應(yīng)的內(nèi)容，例如單擊【商品1］超鏈接，則顯示對應(yīng)文本內(nèi)容'打

開商品1詳情頁面”。

【實(shí)現(xiàn)過程】

創(chuàng)建網(wǎng)頁0703.html,在該網(wǎng)頁中編寫代碼實(shí)現(xiàn)要求的功能。

讀者可以掃描二維碼查看【電子活頁7-2］中網(wǎng)頁0703.html的代碼，或者從本單元配套的教學(xué)資源中打

開對應(yīng)的文檔查看相應(yīng)內(nèi)容。

打開網(wǎng)頁0703.html時，HTML將被渲染為：

<divid="app">

<p>

<ahref="#/"aria-current="pageM

class="router-link-exact-activerouter-link-active">±^</a>

<ahref="#/productDetails"class〉商品詳情</a>

<ahref="#/shoppingCart"class）購物車v/a>

</p>

<div>打開網(wǎng)站主頁</div>

</div>

瀏覽網(wǎng)頁0703.html時，依次單擊【商品詳情】一【商品3］超鏈接，顯示對應(yīng)文本內(nèi)容“打開商品3詳情

頁面”，如圖所示。

豐―商品詳情依初與

商品1商品2商品3

打開商品3詳情頁面

依次單擊【商品詳情】一【商品3】超鏈接顯示對應(yīng)的內(nèi)容

7.4.2設(shè)置默認(rèn)子路由

如果要設(shè)置默認(rèn)子路由，即單擊【商品詳情】超鏈接時自動觸發(fā)“商品1”，則需要進(jìn)行如下修改：將router

配置對象中children屬性的path屬性設(shè)置為"，并將對應(yīng)的router-link的to屬性設(shè)置為/productDetails。

【示例】demo0703.html

讀者可以掃描二維碼查看【電子活頁7-3】中網(wǎng)頁demo0703.html的代碼，或者從本單元配套的教學(xué)資源

中打開對應(yīng)的文檔查看相應(yīng)內(nèi)容。

打開網(wǎng)頁demo0703.html時，HTML將被渲染為：

<divid="app">

<P>

<ahref="#/"aria-current="page"

class=Hrouter-link-exact-activerourer-link-active">±</a>

<ahref="#/productDetails"class〉商品詳情</a>

<ahref="#/shoppingCartMclass>購物車</a>

</p>

<div>打開網(wǎng)站主頁</div>

</div>

瀏覽設(shè)置了默認(rèn)子路由的網(wǎng)頁時，單擊【商品詳情】超鏈接，顯示默認(rèn)文本內(nèi)容“打開商品1詳情頁面”，

如圖所示。

商費(fèi)11兩品2商品3

打開商品1詳情頁面

單擊【商品詳情】超鏈接時顯示默認(rèn)文本內(nèi)容“打開商品1詳情頁面"

7.5設(shè)置與使用命名路由

有時，通過一個名稱來標(biāo)識一個路由顯得更方便，特別是在鏈接一個路由，或者是在執(zhí)行一些跳轉(zhuǎn)時?？?/p>

以在創(chuàng)建router實(shí)例時，在routes配置中給某個路由設(shè)置名稱。

例如:

constrouter=newVueRouter({

routes:[

(

path:7user/:userld',

name:'user',

component:User

)

]

))

要鏈接到一個命名路由，可以給router-link的to屬性傳一個對象，例如：

<router-link:to="{name:'user',params:{userid:123}}">User</router-link>

這跟代碼調(diào)用router.push()方法是一回事，例如：

router.push({name:'user',params:{userid:123}})

這兩種方式都會把路由導(dǎo)航到/user/123路徑。

命名路由的常見用途是替換router-link中的to屬性，如果不使用命名路由，router-link中的to屬性需要

設(shè)置為全路徑，不夠靈活，且修改時較麻煩。使用命名路由，只需要使用包含name屬性的對象即可。

【實(shí)例7?4】設(shè)置與使用命名路由

【操作要求】

通過設(shè)置與使用命名路由實(shí)現(xiàn)【實(shí)例7-3】類似的功能。

【實(shí)現(xiàn)過程】

略

7.6設(shè)量與使用命名視圖

有時候，我們想同時(同級)展示而不是嵌套展示多個視圖。例如創(chuàng)建一個布局，有sidebar(側(cè)導(dǎo)航)和

main(主體內(nèi)容)兩個視圖，這個時候命名視圖就派上用場了。可以在界面中設(shè)置多個單獨(dú)命名的視圖，而不

是只設(shè)置一個單獨(dú)的出口。如果router-view沒有設(shè)置，那么默認(rèn)為default。

例如：

<router-viewclass="viewone"></router-view>

<router-viewclass="viewtwo"name="x"></router-view>

<router-viewclass-"viewthree"name-'y***/router-view>

一個視圖使用一個組件渲染，同一個路由下匹配多個組件，多個視圖就需要多個組件。確保正確使用

components配置。

例如:

varrouter=newVueRouter({

routes:[

(

path:'/',components:{

default:header,

'left'JeftNav,

'main'zmainContent

）

}

〃這里使用復(fù)數(shù)comoonents,第一個屬性與router-view中的name對應(yīng)，

〃第二個屬性表示要展示的組件名稱

]

}）；

【實(shí)例7-5】設(shè)置與使用命名視圖

【操作要求】

定義header（頭部區(qū)域Xleft（側(cè)邊欄）和main（主體內(nèi)容）3個命名視圖，創(chuàng)建一個包含3個區(qū)域的

布局。

【實(shí)現(xiàn)過程】

略

打開網(wǎng)頁0705.html時，HTML將被渲染為：

<divid="app">

<divclass="header">head頭部區(qū)域</div>

<divclass="container>

<divclass="left">left側(cè)邊欄</div>

<divclass=Mmain">main主體內(nèi)容v/div>

</div>

</div>

包含命名視圖的網(wǎng)頁0705.html的瀏覽效果如圖所示。

left曲欄main主體內(nèi)國

包含命名視圖的網(wǎng)頁0705.html的瀏覽效果

7.7設(shè)置與使用動態(tài)路由

經(jīng)常需要把某種模式匹配到的所有路由全都映射到同一個組件。例如有一個User組件，對于所有id各不

相同的用戶，都要使用這個組件來渲染。那么，可以在vue-router的路由路徑中使用動態(tài)路徑參數(shù)（Dynamic

Segment）給路徑的動態(tài)部分匹配不同的id來達(dá)到這個效果，示例代碼如下所示：

constuser={

template:'<div>User</div>'

}

constrouter=newVueRouter（{

routes:[

//動態(tài)路徑參數(shù)id以冒號開頭

{path:7user/:id',component:user}

]

!)

上述代碼中,:id表示用戶ID,它是一個動態(tài)值。

如果寫成{path:7user/:id?',name:'user',componentuser}形式，path:'/usei7:id?’表示有沒有子路徑都可以

匹配。

需要注意的是，動態(tài)路由在來回切換時，由于它們都是指向同一組件，因此Vue不會銷毀再重新創(chuàng)建這個

組件，而是復(fù)用這個組件。也就是說，當(dāng)用戶第一次單擊(如useri)時，Vue把對應(yīng)的組件渲染出來，然后

在use門、user2之間來回切換時，這個組件不會發(fā)生變化。如果想要在組件來回切換時進(jìn)行一些操作，那就

需要在組件內(nèi)部利用watch。方法來監(jiān)聽$route的變化。

可以在一個路由中設(shè)置路徑參數(shù)，路徑參數(shù)使用冒號:標(biāo)記。當(dāng)匹配到一個路由時，參數(shù)值會被設(shè)置到

this.$route.params,可以在每個組件內(nèi)使用。這樣就可以更新Use的模板，輸出當(dāng)前用戶的id。

【示例】demo0704.html

略

打開網(wǎng)頁demo0704.html時，HTML將被渲染為：

<divid="app">

<P>

<ahref=*'#/user/admin"class>/user/admin</a>

<ahref="#/user/better"class>/user/better</a>

</p>

</div>

使用params方式傳遞參數(shù)的網(wǎng)頁瀏覽效果如圖所示。

Zus￡￡Z^dmiQZu￡2iZb￡!ler

一的用戶：admin

使用params方式傳遞參數(shù)的網(wǎng)頁瀏覽效果

可以在一個路由中設(shè)置多段路徑參數(shù)，對應(yīng)的值都會設(shè)置到$route.

params中。除了$route.params外，$route對象還提供了其他有用的信息，例如$route.query(如果URL中有

查詢參數(shù)X$route.hash等。

7.8實(shí)現(xiàn)編程式導(dǎo)航

通過使用<router-link>創(chuàng)建a標(biāo)簽來定義導(dǎo)航鏈接，這種方式屬于聲明式導(dǎo)航，Vue還可以借助router的

實(shí)例方法，通過編寫JavaScript代碼來實(shí)現(xiàn)地址的跳轉(zhuǎn)。

7.8.1使用router.push(location)方法實(shí)現(xiàn)導(dǎo)航

使用router.push。方法可以導(dǎo)航到不同的URL,這個方法會向history棧添加一個新的記錄，所以當(dāng)用戶

單擊瀏覽器后退按鈕時，會回到之前的URLo

當(dāng)單擊<router-link>時，route-.push()方法會在內(nèi)部調(diào)用，也就是說，單擊聲明式導(dǎo)航<router-link:to="...">

等同于調(diào)用編程式導(dǎo)航router.push(...)o

在@36<中，用$router表示路由對象；在methods下的方法中，用this.$router表示路由對象。該方法

的參數(shù)可以是一個字符串路徑，成者是一個描述地址的對象。例如：

〃先獲取router實(shí)例

varrouter=newVueRouter()

II字符串形式

router.push('home')

//對象形式

router.push({path:'home'})

II命名的路由

router.push({name:'user',params:{userid:123}))

II帶查詢參數(shù)，變成/user?id=2

router.push({path:'user',query:{id:'2'}})

在參數(shù)對象中，如果提供了path,params會被忽略，為了傳遞參數(shù),需要提供路由的name或者手寫帶

有參數(shù)的patho

1.使用query方式傳遞參數(shù)

使用query方式傳遞的參數(shù)會出現(xiàn)在地址欄中，例如0706.html#/user?name=admin,尾部

的？name=admin就是query參數(shù)：.

【實(shí)例7-6］使用query方式傳遞參數(shù)

【操作要求】

編寫程序使用query方式傳遞參數(shù)。

【實(shí)現(xiàn)過程】

略

打開網(wǎng)頁0706.html后，單擊【跳轉(zhuǎn)】按鈕，HTML將被渲染為：

<divid="app">

〈button〉跳轉(zhuǎn)〈/button〉

<p>用戶名：admin</p>

</div>

瀏覽網(wǎng)頁0706.html時，頁面中顯示一個【跳轉(zhuǎn)】按鈕。單擊該按鈕，其下方顯示“用戶名：admin”內(nèi)容，

如圖所示，同時傳遞的參數(shù)？name=admin會出現(xiàn)在地址欄中。

一

用戶名：admin

單擊【跳轉(zhuǎn)】按鈕，其下方顯示“用戶名：admin”內(nèi)容

2.使用params方式傳遞參數(shù)

使用params方式傳遞的參數(shù)不會出現(xiàn)在地址欄中，例如0707.html#/user,尾部就不會出現(xiàn)參

數(shù)？name=admin。

【實(shí)例7?7】使用params方式傳遞參數(shù)

【操作要求】

編寫程序使用params方式傳遞參數(shù)。

【實(shí)現(xiàn)過程】

略

打開網(wǎng)頁0707.html后，單擊【跳轉(zhuǎn)】按鈕，HTML將被渲染為：

<divid="app">

〈button,跳轉(zhuǎn)〈/button,

<p>用戶名:admin</p>

</div>

瀏覽網(wǎng)頁0707.html時，頁直中顯示一個【跳轉(zhuǎn)】按鈕。單擊該按鈕，其下方顯示“用戶名：admin”內(nèi)容，

如圖所示。而傳遞的參數(shù)？name=admin不會出現(xiàn)在地址欄中。

用戶名：admin

單擊【跳轉(zhuǎn)】按鈕其下方顯示“用戶名：admin”內(nèi)容

7.8.2使用router.replace(location)方法實(shí)現(xiàn)導(dǎo)航

router.replace。方法與router.push。方法類似，區(qū)別在于為<router-link>設(shè)置replace屬性后，單擊時會調(diào)

用router.replace()方法,導(dǎo)航后不會向history棧添加新記錄，而是替換掉當(dāng)前的history記錄。

示例代碼如下：

〃編程式

router.replace({path:'user'})

〃聲明式

<router-link:to="{path:'user'}"replace></router-link>

7.8.3使用router.go(n)方法實(shí)現(xiàn)導(dǎo)航

router.go()方法的參數(shù)是一個整數(shù)，表示在history歷史記錄中前進(jìn)或者后退多少步，類似

window.history.go(n)o

例如:

II在瀏覽器記錄中前進(jìn)一步，等司于history.forward()

router.go(1)

II后退一步記錄，等同于history.back。

router.go(-1)

II前進(jìn)3步記錄

router.go(3)

//如果history記錄不夠用，就靜默失敗

router.go(-100)

router.go(100)

7.9使用導(dǎo)航鉤子函數(shù)

vue-router提供的導(dǎo)航鉤子函數(shù)主要用來攔截導(dǎo)航，讓它完成跳轉(zhuǎn)或取消。有多種方式可以在珞由導(dǎo)航

發(fā)生時執(zhí)行鉤子函數(shù)：全局導(dǎo)航鉤子函數(shù)、單個路由獨(dú)享的導(dǎo)航鉤子函數(shù)或者組件內(nèi)的導(dǎo)航鉤子函數(shù)。

7.9.1全局導(dǎo)航鉤子函數(shù)

可以使用router.beforeEach。方法注冊一個全局的before鉤子函數(shù)，例如：

constrouter=newVueRouter({...})

router.beforeEach((to,from,next)=>{

//...

})

當(dāng)一個導(dǎo)航觸發(fā)時，全局的before鉤子函數(shù)按照創(chuàng)建順序調(diào)用，鉤子函數(shù)是異步解析執(zhí)行的，此時導(dǎo)航在

所有鉤子函數(shù)執(zhí)行完之前一直處于等待中。

每個鉤子函數(shù)接收以下3個參數(shù)。

①to:Route,即將要進(jìn)入的目標(biāo)路由對象。

②from:Route,當(dāng)前導(dǎo)航正要離開的路由。

③next:Function,一定要調(diào)用next。函數(shù)來執(zhí)行這個鉤子函數(shù)，執(zhí)行效果依賴next。函數(shù)的調(diào)用參數(shù)。

下面是next。函數(shù)傳遞不同參數(shù)的情況。

①next。：執(zhí)行管道中的下一個鉤子函數(shù)。如果全部鉤子函數(shù)執(zhí)行完了，則導(dǎo)航的狀態(tài)就是confirmed確

認(rèn)的卜

②next(false):中斷當(dāng)前的導(dǎo)航。如果瀏覽器的URL改變了i可能是用戶手動改變或者單擊了瀏覽器后

退按鈕)，那么URL會重置到from路由對應(yīng)的地址。

③next(7')或next({path:7'}):跳轉(zhuǎn)到一個不同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行一個新的導(dǎo)航。

同樣可以注冊一個全局的after鉤子函數(shù)，不過它不像before鉤子函數(shù)那樣，after鉤子函數(shù)沒有next()函

數(shù)，不能改變導(dǎo)航，例如：

router.afterEach(route=>{

II...

})

【示例】demo0705.html

略

打開網(wǎng)頁demo0705.html時,HTML將被演染為：

<divid="app">

<P>

<ahref=,'#/"aria-current="page"

class="router-link-exact-activerouter-link-active">主頁</a>

<ahref="#/productDetails"class>商品詳情</a>

<ahref="#/shoppingCart"class〉購物車v/a>

</p>

<div>打開網(wǎng)站主頁</div>

</div>

瀏覽使用全局導(dǎo)航鉤子函數(shù)的網(wǎng)頁，單擊【購物車】超鏈接時:其下方顯示文本內(nèi)容'請登錄”，如圖所示。

主頁商品詳情購物車

請登泉

單擊【購物車】超鏈接時其下方顯示文本內(nèi)容“請登錄”

7.9.2單個路由獨(dú)享的導(dǎo)航鉤子函數(shù)

可以在路由配置上直接定義匕eforeEnter鉤子函數(shù)，例如：

constrouter=newVueRouter({

routes:[

(

path:"/login',

component:Login,

beforeEnter:(to,from,next)=>{

II...

)

)

]

})

這些鉤子函數(shù)與全局before鉤子函數(shù)的參數(shù)是一樣的。

7.9.3組件內(nèi)的導(dǎo)航鉤子函數(shù)

可以在路由組件內(nèi)直接定義以下路由導(dǎo)航鉤子函數(shù)，例如：

beforeRouteEnter

beforeRouteUpdate(2.2新增)

beforeRouteLeave

constLogin={

template:

beforeRouteEnter(to,from,next){

//在渲染該組件的對應(yīng)路由被確認(rèn)前調(diào)用，不能獲取組件實(shí)例this,

〃因?yàn)樵阢^子執(zhí)行前，組件實(shí)例還沒被創(chuàng)建

).

beforeRouteUpdate(to,from,next){

//在當(dāng)前路由改變但是該組件被復(fù)用時調(diào)用

}.

beforeRouteLeave(to,from,next){

II導(dǎo)航寓開該組件的對應(yīng)路由時調(diào)用，可以訪問組件實(shí)例this

}

)

beforeRouteEnter鉤子函數(shù)不能訪問this,因?yàn)殂^子函數(shù)在導(dǎo)航確認(rèn)前被調(diào)用，而即將登場的新組件還沒

被創(chuàng)建。不過，可以通過傳一個回調(diào)函數(shù)給next來訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時候執(zhí)行回調(diào)函數(shù)，并且把

組件實(shí)例作為回調(diào)函數(shù)的參數(shù)。

例如:

beforeRouteEnter(to,from,next){

next(vm=>{

//通過vm訪問組件實(shí)例

})

)

可以在beforeRouteLeave中直接訪問this,這個leave鉤子函數(shù)通常用來禁止用戶在還未保存修改前突

然離開?？梢酝ㄟ^next(false)方法來取消導(dǎo)航。

7.10使用懶加載

當(dāng)打包構(gòu)建應(yīng)用時，JavaScript包會變得非常大，從而影響頁面加載。如果能把不同路由對應(yīng)的組件分割

成不同的代碼塊，然后在路由被訪問的時候才加載對應(yīng)組件，這樣執(zhí)行起來就更加高效了。結(jié)合Vue的異步組

件和webpack的代碼分割功能，可以輕松實(shí)現(xiàn)路由組件的懶加載。

首先，可以將異步組件定義為返回一個Promise的工廠函數(shù)，該函數(shù)返回的Promise應(yīng)該是resolve組件

本身。

例如：

constLogin=()=>Promise.resolve({/*組件定義對象*/})

在webpack2中，使用動態(tài)import語法來定義代碼分塊點(diǎn)(splitpoint卜

例如：

import('./Login.vue')//returnsaPromise

結(jié)合這兩者，這就是如何定義一個能夠被webpack自動代碼分割的異步組件。

例如：

constLogin=()=>importf./Login.vue')

在路由配置中什么都不需要改變，只需要像往常一樣使用Logii,例如：

constrouter=newVueRouter({

routes:[

{path:'/login',component:Login}

]

})

有時候想把某個路由下的所有組件都打包在同一個棄步塊(chunk)中，只需要使用命名chunk即可，一

個特殊的注釋語法來提供chunkname(需要webpack>2.4}

例如：

constLogin=()=>import。*weopackChunkName:"group-login"*1'/Login.vue')

constRegister=()=>import(/*webpackChunkName:"group-login"?/'./Register.vue')

constHome=()=>import(/*webpackChunkName:"group-login"*/'./Home.vue')

webpack會將任何一個異步模塊與相同的塊名稱組合到相同的異步塊中。

7.11vue-router的API

7.11.1router-link

<router-link>組件支持用戶在具有路由功能的應(yīng)用中實(shí)現(xiàn)導(dǎo)航，通過to屬性指定目標(biāo)地址，默認(rèn)渲染成帶有

正確鏈接的<a>標(biāo)簽，可以通過配置tag屬性生成別的標(biāo)簽。另外，出目標(biāo)路由成功激活時，鏈接元素自動設(shè)置一

個表示激活的CSS類名。

<router-link>比<ahref=>好一些，無論是history模式還是hash模式，它的表現(xiàn)行為一致，所以當(dāng)切換

路由模式，或者在IE9降級使用hash模式時，無須做任何變動。在HTML5history模式下，router-link會攔截

單擊事件，讓瀏覽器不再重新加載頁面。在HTML5history模式下使用base選項(xiàng)之后，所有的t。屬性都不需要

寫基路徑了。

(1)to(required)

to(required)表示目標(biāo)路由的鏈接。當(dāng)被單擊后，內(nèi)部會立刻把to的值傳到router.push()方法，所以這個

道可以是一個字符串或者是描述目標(biāo)位置的對象。

例如:

<!-字符串->

<router-linkto="home">Home</router-link>

<!-渲染結(jié)果->

<ahref=,,home">Home</a>

(2)replace

設(shè)置replace屬性的話，當(dāng)單擊時，會調(diào)用router.replace。方法而不是router.push()方法，于是導(dǎo)航后不

會留下history記錄，例如：

<router-link:to="{path:7abe'}"replace></router-link>

(3)append

設(shè)置append屬性后，則在當(dāng)前(相對)路徑前添加基路徑。例如，從/a導(dǎo)航到一個相對路徑b,如果沒

有設(shè)置append屬性，則路徑為/b,如果設(shè)置了append屬性，則路徑為/a/b。

例如:

<router-link:to="{path:'relative/path'}"append></router-link>

(4)tag

tag的默認(rèn)值為ao有時想要<router-link>渲染成某種標(biāo)簽，例如<li>o于是使用tagprop類指定何種標(biāo)

簽，同樣它還是會監(jiān)聽單擊事件，觸發(fā)導(dǎo)航。

例如：

<router-linkto=7login"tag="li">login</router-link>

<!-渲染結(jié)果->

<li>login</li>

(5)active-class

active-class用于設(shè)置鏈接激活時使用的CSS類名，默認(rèn)值可以通過路由的構(gòu)造選項(xiàng)linkActiveClass來

全局配置。

(6)exact

是否激活默認(rèn)類名的依據(jù)是inclusivematch(全包含匹配卜如果當(dāng)前的路徑是/a開頭的，那么<router-

linkto="/a">也會被設(shè)置CSS類名。按照這個規(guī)則，<router-linkto="/">將會點(diǎn)亮各個路由。想要鏈接使用“exact

匹配模式”，則使用exact屬性。

例如:

<!-這個鏈接只會在地址為/的時候被激活->

<router-linkto='7"exact>

(7)events

events的默認(rèn)值為click,用于聲明可以用來觸發(fā)導(dǎo)航的事件,可以是一個字符串或是一個包含字符串的

數(shù)組。

7.11.2router-view

<router-view>組件是一個實(shí)用組件，渲染路徑匹配到的視圖組件。<router-view>渲染的組件還可以內(nèi)嵌自

三的<router-view>,根據(jù)嵌套路徑，渲染嵌套組件。

<router-view>組件的name屬性默認(rèn)值為defaulto

如果<router-view>設(shè)置了名稱，則會渲染對應(yīng)的路由配置中components下的相應(yīng)組件。

因?yàn)?lt;router-view>也是個組件，所以可以配合<trans計ion>和<keep-alive>使用。如果兩個結(jié)合一起用，

要確保在內(nèi)層使用<keep-alive>,例如：

<transition>

<keep-alive>

<router-view></