Vue.js路由配置與應(yīng)用時(shí)間：匯報(bào)人：JavaScript+Vue.js前端開(kāi)發(fā)任務(wù)驅(qū)動(dòng)式教程1.vue-router的基本使用2.重定向和使用別名3.設(shè)置與使用根路徑4.設(shè)置與使用嵌套路由5.設(shè)置與使用命名路由6.設(shè)置與使用命名視圖7.設(shè)置與使用動(dòng)態(tài)路由8.實(shí)現(xiàn)編程式導(dǎo)航目錄Vue在插入、更新或者移除DOM時(shí)，能提供多種不同的過(guò)渡效果。而transition組件是通過(guò)初始狀態(tài)和結(jié)束狀態(tài)之間的平滑過(guò)渡實(shí)現(xiàn)簡(jiǎn)單動(dòng)畫的。以下示例代碼通過(guò)一個(gè)按鈕控制<p>元素的顯示或隱藏，并且沒(méi)有使用過(guò)渡效果?！臼纠?3-1】代碼如下。<divid="app"><buttonv-on:click="show=!show"><spanv-if="show">隱藏</span><spanv-else>顯示</span></button><pv-show="show">歡迎登錄</p></div><script>varvm=newVue({el:'#app',data:{show:true}})</script>如果要為頁(yè)面內(nèi)容的顯示或隱藏添加過(guò)渡效果，則需要使用過(guò)渡組件。通過(guò)CSS方式實(shí)現(xiàn)過(guò)渡效果在使用vue-router之前，首先需要安裝該插件，命令如下所示。npminstallvue-router如果在一個(gè)模塊化工程中使用vue-router，必須要通過(guò)Vue.use()明確地實(shí)現(xiàn)路由功能，代碼如下所示。importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)也可以使用全局的<script>標(biāo)簽引入對(duì)應(yīng)的庫(kù)，代碼如下。<scriptsrc="vue.js"></script><scriptsrc="vue-router.js"></script>vue-router的基本使用安裝vue-route使用Vue+vue-router創(chuàng)建單頁(yè)應(yīng)用非常方便。使用Vue可以通過(guò)組合組件來(lái)組成應(yīng)用程序，把vue-router添加進(jìn)來(lái)，將組件映射到路由（route），然后告訴vue-router在哪里渲染它們。【編程訓(xùn)練】【示例14-1】demo1401.html創(chuàng)建網(wǎng)頁(yè)demo1401.html，在該網(wǎng)頁(yè)中編寫代碼，使用vue-router實(shí)現(xiàn)當(dāng)單擊頁(yè)面的“登錄”超鏈接時(shí)，頁(yè)面顯示對(duì)應(yīng)的內(nèi)容“打開(kāi)登錄頁(yè)面”；單擊“注冊(cè)”超鏈接時(shí)，頁(yè)面顯示對(duì)應(yīng)的內(nèi)容“打開(kāi)注冊(cè)頁(yè)面”。（1）引入庫(kù)<scriptsrc="vue.js"></script><scriptsrc="vue-router.js"></script>vue-router的基本使用使用vue-router（2）使用router-link組件實(shí)現(xiàn)導(dǎo)航<p><!--使用router-link組件來(lái)導(dǎo)航--><!--通過(guò)to屬性指定超鏈接--><!--<router-link>默認(rèn)會(huì)被渲染成一個(gè)<a>標(biāo)簽--><router-linkto="/login">登錄</router-link><router-linkto="/register">注冊(cè)</router-link></p>（3）添加路由出口<!--路由出口--><!--路由匹配到的組件將在這里渲染--><router-view></router-view>vue-router的基本使用使用vue-router（4）添加注釋如果使用模塊化機(jī)制編程，則需要先導(dǎo)入Vue和VueRouter。這里不需要導(dǎo)入Vue、VueRouter和使用Vue.use(VueRouter)，所以需要對(duì)以下3行代碼添加注釋符號(hào)。//importVuefrom'vue'//importVueRouterfrom'vue-router'//Vue.use(VueRouter)（5）定義路由組件constLogin={template:'<div>打開(kāi)登錄頁(yè)面</div>'}constRegister={template:'<div>打開(kāi)注冊(cè)頁(yè)面</div>'}vue-router的基本使用使用vue-router（6）定義路由//每個(gè)路由都應(yīng)該映射一個(gè)組件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//簡(jiǎn)寫形式，相當(dāng)于routes:routes})vue-router的基本使用使用vue-router（8）創(chuàng)建和掛載根實(shí)例//通過(guò)router配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能。constvm=newVue({el:'#app',router})打開(kāi)該網(wǎng)頁(yè)時(shí)，HTML代碼將被渲染為<divid="app"><p><ahref="#/login"class>登錄</a><ahref="#/register"class>注冊(cè)</a></p></div>vue-router的基本使用使用vue-routerVue用于實(shí)現(xiàn)單頁(yè)前端路由時(shí)提供了兩種模式，分別是hash模式和history模式。1．hash模式vue-router默認(rèn)使用hash模式，即使用URL的hash來(lái)模擬一個(gè)完整的URL（當(dāng)URL改變時(shí)，頁(yè)面不會(huì)重新加載），如http://localhost:8080/#/login。#就是hash符號(hào)，中文名為哈希符或者錨點(diǎn)，hash符號(hào)后的值稱為hash值。2．history模式hash模式的URL中自帶#符號(hào)，這會(huì)影響URL的美觀，而路由的history模式的URL中不會(huì)出現(xiàn)#符號(hào)，這種模式充分利用history.pushState()來(lái)完成URL的跳轉(zhuǎn)，并且無(wú)須重新加載頁(yè)面。使用history模式時(shí)，需要在路由規(guī)則配置中增加mode:'history'，示例代碼如下。constrouter=newVueRouter({mode:'history',routes:[…]})vue-router的基本使用vue-router的路由模式當(dāng)使用history模式時(shí)，完整URL的示例如下。http://localhost:8080/login如果要使用history模式，則需要進(jìn)行服務(wù)器配置，如果服務(wù)器沒(méi)有正確配置，則瀏覽器訪問(wèn)頁(yè)面時(shí)可能會(huì)返回404錯(cuò)誤頁(yè)面。所以，要在服務(wù)器上增加一個(gè)覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個(gè)index.html頁(yè)面，這個(gè)頁(yè)面就是App依賴的頁(yè)面。這么設(shè)置以后，服務(wù)器就不再返回404錯(cuò)誤頁(yè)面，因?yàn)樗新窂蕉紩?huì)返回index.html頁(yè)面。為了避免出現(xiàn)這種情況，應(yīng)該在Vue應(yīng)用中覆蓋所有路由情況。例如：constrouter=newVueRouter({mode:'history',routes:[{path:'*',component:NotFoundComponent}]})vue-router的基本使用vue-router的路由模式Vue的重定向功能通過(guò)routes配置path和redirect來(lái)實(shí)現(xiàn)以下代碼的目的是從/x重定向到/home。constrouter=newVueRouter({routes:[{path:'/x',redirect:'/home'}]})重定向的目標(biāo)可以是一個(gè)已命名的路由，示例代碼如下。constrouter=newVueRouter({routes:[{path:'/x',redirect:{name:'home'}}]})重定向和使用別名重定向重定向的目標(biāo)也可以是一個(gè)方法，動(dòng)態(tài)返回重定向目標(biāo)，示例代碼如下。constrouter=newVueRouter({routes:[{path:'/x',redirect:to=>{//方法接收目標(biāo)路由作為參數(shù)

//返回重定向的字符串路徑/路徑對(duì)象

return'/home'}}]})對(duì)于不識(shí)別的URL，常常使用重定向功能，將頁(yè)面定向到主頁(yè)面。重定向和使用別名重定向【示例14-2】創(chuàng)建網(wǎng)頁(yè)demo1402.html，在該網(wǎng)頁(yè)中編寫代碼，使用Vue的重定向功能實(shí)現(xiàn)單擊超鏈接時(shí)顯示對(duì)應(yīng)的頁(yè)面內(nèi)容，具體要求如下。（1）打開(kāi)網(wǎng)頁(yè)時(shí)，默認(rèn)顯示內(nèi)容“打開(kāi)網(wǎng)站主頁(yè)”。（2）單擊頁(yè)面中的“登錄”超鏈接時(shí)，頁(yè)面顯示對(duì)應(yīng)的內(nèi)容“打開(kāi)登錄頁(yè)面”。（3）單擊頁(yè)面中的“注冊(cè)”超鏈接時(shí)，頁(yè)面顯示對(duì)應(yīng)的內(nèi)容“打開(kāi)注冊(cè)頁(yè)面”。（4）單擊頁(yè)面中的“主頁(yè)”和“不存在的鏈接”超鏈接時(shí)，頁(yè)面都會(huì)顯示“打開(kāi)網(wǎng)站主頁(yè)”內(nèi)容，即對(duì)于無(wú)法識(shí)別的URL，使用重定向功能將頁(yè)面定向到主頁(yè)面。<divid="app"><p><router-linkto="/home">主頁(yè)</router-link><router-linkto="/login">登錄</router-link><router-linkto="/register">注冊(cè)</router-link><router-linkto="/*">不存在的鏈接</router-link></p>重定向和使用別名重定向<router-view></router-view></div><script>constHome={template:'<div>打開(kāi)網(wǎng)站主頁(yè)</div>'}constLogin={template:'<div>打開(kāi)登錄頁(yè)面</div>'}constRegister={template:'<div>打開(kāi)注冊(cè)頁(yè)面</div>'}constNotFound={template:'<div>網(wǎng)頁(yè)沒(méi)有找到</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>重定向和使用別名重定向打開(kāi)該網(wǎng)頁(yè)時(shí)，HTML代碼將被渲染為以下內(nèi)容。<divid="app"><p><ahref="#/home"aria-current="page"class="router-link-exact-activerourer-link-active">主頁(yè)</a><ahref="#/login"class>登錄</a><ahref="#/register"class>注冊(cè)</a><ahref="#/*"class>不存在的鏈接</a></p><div>打開(kāi)網(wǎng)站主頁(yè)</div></div>打開(kāi)具有重定向功能的網(wǎng)頁(yè)demo1402.html時(shí)，默認(rèn)顯示“打開(kāi)網(wǎng)站主頁(yè)”內(nèi)容，如圖14-2所示。重定向和使用別名重定向重定向是指當(dāng)用戶訪問(wèn)/x時(shí)，URL將會(huì)被替換為/y，并匹配路由/y。換句話說(shuō)，/a的別名是/b，這意味著當(dāng)用戶訪問(wèn)/b時(shí)，URL會(huì)保持為/b，但是匹配路由/a，就像用戶訪問(wèn)/a一樣。上面對(duì)應(yīng)的路由配置如下constrouter=newVueRouter({routes:[{path:'/a',component:A,alias:'/b'}]})別名功能可以自由地將用戶界面結(jié)構(gòu)映射到任意URL，而不受限于配置的嵌套路由結(jié)構(gòu)。處理對(duì)主頁(yè)面的訪問(wèn)時(shí)，常常將index設(shè)置為別名，如將/home的別名設(shè)置為/index。需要注意的是，<router-linkto="/home">的樣式在URL為/index時(shí)并不會(huì)顯示。因?yàn)閞outer-link只識(shí)別出了/home，而無(wú)法識(shí)別/index。重定向和使用別名使用別名設(shè)置與使用根路徑時(shí)，將path設(shè)置為'/‘即可?！臼纠?4-3】demo1403.html掃描二維碼查看【電子活頁(yè)

14-1】中網(wǎng)頁(yè)

demo1403.html

的代碼或者從本模塊配套的教學(xué)資源中打開(kāi)對(duì)應(yīng)的文檔查看相應(yīng)內(nèi)容。打開(kāi)網(wǎng)頁(yè)demo1403.html時(shí)，HTML代碼將被渲染為<divid="app"><p><ahref="#/"aria-current="page"class="router-link-exact-activerourer-link-active">主頁(yè)</a><ahref="#/login"class>登錄</a><ahref="#/register"class>注冊(cè)</a><ahref="#/*"class>不存在的鏈接</a></p><div>打開(kāi)網(wǎng)站主頁(yè)</div></div>但是由于默認(rèn)使用的是全包含匹配，因此'/login'、'/register'也可以匹配到'/'

。如果需要精確匹配，僅僅匹配'/'，則需要在router-link中設(shè)置exact屬性。設(shè)置與使用根路徑【示例14-4】demo1404.html部分有變化的代碼如下。

<p><router-linkto="/"exact>index</router-link><router-linkto="/login">登錄</router-link><router-linkto="/register">注冊(cè)</router-link></p>constroutes=[{path:'/',component:Home},{path:'/login',component:Login},{path:'/register',component:Register},]其他代碼與demo1403.html的相同。設(shè)置與使用根路徑實(shí)際應(yīng)用的頁(yè)面通常由多層嵌套的組件組合而成。同樣，URL中各段動(dòng)態(tài)路徑按某種結(jié)構(gòu)對(duì)應(yīng)嵌套的各層組件。使用vue-router的嵌套路由配置可以簡(jiǎn)單地實(shí)現(xiàn)這種關(guān)系。嵌套子路由的關(guān)鍵屬性是children，children可以像routes一樣用于配置路由數(shù)組。每一個(gè)子路由中可以嵌套多個(gè)組件。當(dāng)使用children屬性實(shí)現(xiàn)子路由時(shí)，子路由的path屬性值不要帶“/”。設(shè)置與使用嵌套路由使用vue-router實(shí)現(xiàn)嵌套路由【示例14-5】demo1405.html創(chuàng)建網(wǎng)頁(yè)demo1405.html，在該網(wǎng)頁(yè)中編寫代碼，使用vue-router通過(guò)嵌套路由實(shí)現(xiàn)單擊超鏈接后顯示對(duì)應(yīng)的頁(yè)面內(nèi)容，具體要求如下。（1）打開(kāi)網(wǎng)頁(yè)時(shí)默認(rèn)顯示內(nèi)容“打開(kāi)網(wǎng)站主頁(yè)”，單擊頁(yè)面中的“主頁(yè)”超鏈接時(shí)，也會(huì)顯示內(nèi)容“打開(kāi)網(wǎng)站主頁(yè)”。（2）單擊頁(yè)面中的“購(gòu)物車”超鏈接時(shí)，頁(yè)面顯示對(duì)應(yīng)的內(nèi)容“打開(kāi)購(gòu)物車頁(yè)面”。（3）單擊頁(yè)面中的“商品詳情”超鏈接時(shí)，頁(yè)面顯示第2層超鏈接“商品1”“商品2”“商品3”，單擊第2層超鏈接，打開(kāi)對(duì)應(yīng)商品的詳情頁(yè)面，這里會(huì)顯示對(duì)應(yīng)的內(nèi)容。如，單擊“商品1”超鏈接，顯示對(duì)應(yīng)內(nèi)容“打開(kāi)商品1詳情頁(yè)面”。掃描二維碼查看【電子活頁(yè)14-2】中網(wǎng)頁(yè)demo1405.html的代碼或者從本模塊配套的教學(xué)資源中打開(kāi)對(duì)應(yīng)的文檔查看相應(yīng)內(nèi)容。設(shè)置與使用嵌套路由使用vue-router實(shí)現(xiàn)嵌套路由打開(kāi)網(wǎng)頁(yè)demo1405.html時(shí)，HTML代碼將被渲染為<divid="app"><p><ahref="#/"aria-current="page"class="router-link-exact-activerourer-link-active">主頁(yè)</a><ahref="#/productDetails"class>商品詳情</a><ahref="#/shoppingCart"class>購(gòu)物車</a></p><div>打開(kāi)網(wǎng)站主頁(yè)</div></div>瀏覽網(wǎng)頁(yè)demo1405.html時(shí)，依次單擊“商品詳情”→“商品3”超鏈接時(shí)，顯示對(duì)應(yīng)內(nèi)容“打開(kāi)商品3詳情頁(yè)面”，如圖14-3所示。在router的構(gòu)造配置中，children屬性中的path屬性只需要設(shè)置為當(dāng)前路徑，因?yàn)槠鋾?huì)依據(jù)層級(jí)關(guān)系識(shí)別路徑；而router-link中的to屬性需要設(shè)置為完整路徑。設(shè)置與使用嵌套路由使用vue-router實(shí)現(xiàn)嵌套路由如果要設(shè)置默認(rèn)子路由，即單擊“商品詳情”超鏈接時(shí)，自動(dòng)顯示“打開(kāi)商品1詳情頁(yè)面”，則需要進(jìn)行如下修改。設(shè)置router配置對(duì)象中children屬性的path屬性，并將對(duì)應(yīng)的router-link的to屬性設(shè)置為'/productDetails’?！臼纠?4-6】demo1406.html掃描二維碼查看【電子活頁(yè)14-3】中網(wǎng)頁(yè)demo1406.html的代碼或者從本模塊配套的教學(xué)資源中打開(kāi)對(duì)應(yīng)的文檔查看相應(yīng)內(nèi)容。打開(kāi)網(wǎng)頁(yè)demo1406.html時(shí)，HTML代碼將被渲染為<divid="app"><p><ahref="#/"aria-current="page"class="router-link-exact-activerourer-link-active">主頁(yè)</a><ahref="#/productDetails"class>商品詳情</a><ahref="#/shoppingCart"class>購(gòu)物車</a></p><div>打開(kāi)網(wǎng)站主頁(yè)</div></div>瀏覽設(shè)置了默認(rèn)子路由的網(wǎng)頁(yè)時(shí)，單擊“商品詳情”超鏈接時(shí)顯示默認(rèn)內(nèi)容“打開(kāi)商品1詳情頁(yè)面”，如圖14-4所示。設(shè)置與使用嵌套路由設(shè)置默認(rèn)子路由有時(shí)，通過(guò)一個(gè)名稱來(lái)標(biāo)識(shí)一個(gè)路由顯得更方便，特別是在鏈接一個(gè)路由，或者執(zhí)行跳轉(zhuǎn)操作時(shí)?？梢栽趧?chuàng)建Router實(shí)例時(shí)，在routes配置中為某個(gè)路由設(shè)置名稱。例如：constrouter=newVueRouter({routes:[{path:'/user/:userId',name:'user',component:User}]})要鏈接到一個(gè)命名路由，可以為router-link的to屬性傳遞一個(gè)對(duì)象，例如：<router-link:to="{name:'user',params:{userId:123}}">User</router-link>這與調(diào)用router.push()的作用相同，例如：router.push({name:'user',params:{userId:123}})這兩種方式都會(huì)把路由導(dǎo)航到/user/123。命名路由的常見(jiàn)用途是替換router-link中的to屬性，如果不使用命名路由，則router-link中的to屬性需要設(shè)置為全路徑，這樣使用不夠靈活，且修改時(shí)較麻煩。使用命名路由后，只需要使用包含name屬性的對(duì)象。如果設(shè)置了默認(rèn)子路由，則不需要在父路由上設(shè)置name屬性。設(shè)置與使用命名路由有時(shí)候用戶想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示。例如，創(chuàng)建一個(gè)布局，有sidebar（側(cè)導(dǎo)航）和main（主內(nèi)容）兩個(gè)視圖，此時(shí)命名視圖就派上用場(chǎng)了。頁(yè)面中可以擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口（路由組件“掛載點(diǎn)”）。如果router-view沒(méi)有設(shè)置名稱，那么其名稱默認(rèn)為default。例如：<router-viewclass="viewone"></router-view><router-viewclass="viewtwo"name="x"></router-view><router-viewclass="viewthree"name="y"></router-view>一個(gè)視圖使用一個(gè)組件渲染，若同一個(gè)路由匹配多個(gè)組件，則多個(gè)視圖需要多個(gè)組件。用戶要正確使用components配置。設(shè)置與使用命名視圖例如：varrouter=newVueRouter({routes:[{path:'/',components:{default:header,'left':leftNav,'main':mainContent}}//這里使用components，其第一個(gè)屬性與router-view中的name對(duì)應(yīng)

//第二個(gè)屬性表示要展示的組件名稱

]});設(shè)置與使用命名視圖【示例14-8】demo1408.html創(chuàng)建網(wǎng)頁(yè)demo1408.html，在該網(wǎng)頁(yè)中編寫代碼，設(shè)置與使用命名視圖，即定義header（頭部區(qū)域）、left（側(cè)邊欄）和main（主內(nèi)容）3個(gè)命名視圖，創(chuàng)建一個(gè)包含3個(gè)區(qū)域的布局。掃描二維碼查看【電子活頁(yè)14-5】中網(wǎng)頁(yè)demo1408.html的代碼或者從本模塊配套的教學(xué)資源中打開(kāi)對(duì)應(yīng)的文檔查看相應(yīng)內(nèi)容。打開(kāi)網(wǎng)頁(yè)demo1408.html時(shí)，HTML代碼將被渲染為<divid="app"><divclass="header">header（頭部區(qū)域）</div><divclass="container"><divclass="left">left（側(cè)邊欄）</div><divclass="main">main（主內(nèi)容）</div></div></div>包含命名視圖的網(wǎng)頁(yè)demo1408.html的瀏覽效果如圖14-5所示。設(shè)置與使用命名視圖通常，需要把某種模式匹配到的所有路由全都映射到同一個(gè)組件。例如，有一個(gè)User組件，ID各不相同的各用戶都要使用這個(gè)組件來(lái)渲染網(wǎng)頁(yè)。此時(shí)，可以在vue-router的路由路徑中使用動(dòng)態(tài)路徑參數(shù)（DynamicSegment）為路徑的動(dòng)態(tài)部分匹配不同的ID來(lái)實(shí)現(xiàn)這個(gè)效果，示例代碼如下。constuser={template:'<div>User</div>'}constrouter=newVueRouter({routes:[//動(dòng)態(tài)路徑參數(shù)id以冒號(hào)開(kāi)頭

{path:'/user/:id',component:user}]})設(shè)置與使用動(dòng)態(tài)路由上述代碼中，“:id”表示用戶ID，它是一個(gè)動(dòng)態(tài)值。如果寫為{path:'/user/:id?',name:'user',component:user}，則path:'/user/:id?'表示該路由可以匹配/user路徑以及帶有可選參數(shù)id的路徑。需要注意的是，動(dòng)態(tài)路由來(lái)回切換時(shí)，由于它們都指向同一個(gè)組件，因此Vue不會(huì)銷毀再重新創(chuàng)建這個(gè)組件，而是復(fù)用這個(gè)組件。也就是說(shuō)，當(dāng)用戶（如user1）第一次單擊觸發(fā)事件時(shí)，Vue把對(duì)應(yīng)的組件渲染出來(lái)，并在user1、user2中來(lái)回切換，且這個(gè)組件不會(huì)發(fā)生變化。如果想要在組件來(lái)回切換時(shí)進(jìn)行一些操作，則需要在組件內(nèi)部使用watch來(lái)監(jiān)聽(tīng)$route的變化?？梢栽谝粋€(gè)路由中設(shè)置路徑參數(shù)，路徑參數(shù)使用冒號(hào)（：）標(biāo)記。當(dāng)匹配到一個(gè)路由時(shí)，參數(shù)值會(huì)被設(shè)置到this.$route.params中，可以在每個(gè)組件內(nèi)使用。這樣就可以更新User的模板，輸出當(dāng)前用戶ID。設(shè)置與使用動(dòng)態(tài)路由【示例14-9】demo1409.html在網(wǎng)頁(yè)demo1409.html中編寫的代碼如下。<divid="app"><p><router-linkto="/user/admin">/user/admin</router-link><router-linkto="/user/better">/user/better</router-link></p><router-view></router-view></div><script>constUser={template:`<div>當(dāng)前用戶：{{$route.params.id}}</div>`}constrouter=newVueRouter({routes:[{path:'/user/:id',component:User}]})constapp=newVue({router}).$mount('#app')</script>設(shè)置與使用動(dòng)態(tài)路由打開(kāi)網(wǎng)頁(yè)demo1409.html時(shí)，HTML代碼將被渲染為<divid="app"><p><ahref="#/user/admin"class>/user/admin</a><ahref="#/user/better"class>/user/better</a></p></div>使用

params

方式傳參的網(wǎng)頁(yè)瀏覽效果如圖

14-6所示?？梢栽谝粋€(gè)路由中設(shè)置多段路徑參數(shù)，其對(duì)應(yīng)的值都會(huì)被設(shè)置到$route.params中。除了$route.params外，$route對(duì)象還提供了其他有用信息，如$route.query（如果URL中有查詢參數(shù)）、$route.hash等。設(shè)置與使用動(dòng)態(tài)路由除了使用<router-link>創(chuàng)建<a>標(biāo)簽來(lái)定義導(dǎo)航超鏈接，還可根據(jù)不同的規(guī)則（如支付成功或支付失?。?dǎo)航到不同的路徑，此時(shí)會(huì)跳轉(zhuǎn)到不同的頁(yè)面。這種方式屬于聲明式導(dǎo)航，這種情景使用<router-link>不容易實(shí)現(xiàn)相同功能，此時(shí)可以使用VueRouter提供的實(shí)例方法push()來(lái)實(shí)現(xiàn)編程式導(dǎo)航功能。在Vue實(shí)例內(nèi)部可以通過(guò)router訪問(wèn)路由實(shí)例，因此通過(guò)調(diào)用router.push()即可實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。實(shí)現(xiàn)編程式導(dǎo)航使用vue-router實(shí)現(xiàn)嵌套路由history棧是瀏覽器內(nèi)置的對(duì)象，用于管理用戶的瀏覽歷史記錄，在使用router.push()方法導(dǎo)航到不同的URL時(shí)，router.push()方法會(huì)向history棧添加一個(gè)新的記錄，所以當(dāng)用戶單擊瀏覽器的后退按鈕時(shí)，會(huì)回到之前的URL（頁(yè)面）。當(dāng)單擊<router-link>時(shí)，router.push()方法會(huì)在<router-link>內(nèi)部被調(diào)用，也就是說(shuō)，單擊聲明式導(dǎo)航<router-link:to="…">等同于調(diào)用編程式導(dǎo)航router.push(…)。<router-link>屬于聲明式導(dǎo)航，router.push()屬于編程式導(dǎo)航，即借助router的實(shí)例方法push()，通過(guò)編寫JavaScript代碼來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。實(shí)現(xiàn)編程式導(dǎo)航使用vue-router實(shí)現(xiàn)嵌套路由在@click中，使用router表示路由對(duì)象，在methods方法中，使用this.router表示路由對(duì)象。該方法的參數(shù)可以是一個(gè)字符串路徑，或者一個(gè)描述地址的對(duì)象。例如：//獲取Router實(shí)例varrouter=newVueRouter()//字符串形式router.push('home')//對(duì)象形式router.push({path:'home'})//命名路由router.push({name:'user',params:{userId:123}})//帶查詢參數(shù)，變?yōu)?user?id=2router.push({path:'user',query:{id:'2'}})在參數(shù)對(duì)象中，如果提供了path，則params會(huì)被忽略，為了傳遞參數(shù)，需要提供路由的name或者帶有參數(shù)的path。實(shí)現(xiàn)編程式導(dǎo)航使用vue-router實(shí)現(xiàn)嵌套路由1．使用query方式傳參使用query方式傳遞的參數(shù)會(huì)出現(xiàn)在瀏覽器的地址欄中，如“0706.html#/user?name=admin”，其尾部的“?name=admin”就是query參數(shù)。【示例14-10】dem