Vue.js 3.x前端開發(fā)技術(shù)與實戰(zhàn) 課件 -第8章路由Vue Router

第8章路由VueRouter（4學(xué)時）教學(xué)目標學(xué)會安裝和配置VueRouter。學(xué)會定義路由表和路由。掌握router-link和router-view標記的基本語法。理解VueRouter的各種高級應(yīng)用。學(xué)會使用VueRouter實現(xiàn)單頁應(yīng)用中的導(dǎo)航。18.1VueRouter概述VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用(SinglePageApplication，SPA)變得易如反掌。在VueRouter單頁面應(yīng)用中，路徑之間的切換，也就是組件的切換。

路由模塊的本質(zhì)就是建立起URL和頁面之間的映射關(guān)系。Vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。VueRouter包含的功能有：嵌套的路由/視圖表。模塊化的、基于組件的路由配置。路由參數(shù)、查詢、通配符?；赩ue.js過渡系統(tǒng)的視圖過渡效果。細粒度的導(dǎo)航控制。帶有自動激活的CSSclass的鏈接。支持HTML5歷史模式（或hash模式）。自定義的滾動條行為。8.1.1VueRouter安裝與使用1．直接下載/CDN。

可以訪問/vue-router@4.2.5/dist/vue-router.global.js，然后右單擊頁面，選擇“網(wǎng)頁另存為”菜單或在當前頁面上按“Ctrl+S”，將vue-router.global.js保存在自己開發(fā)的文件夾下，也可以直接使用CDN資源，然后在項目中引用它。引用格式如下：<scriptsrc="/path/to/vue.js"></script><scriptsrc="/path/to/vue-router.global.js"></script><scriptsrc="/vue-router@4.2.5/dist/vue-router.global.js"></script>2．使用NPM安裝npminstallvue-router--save-dev|-D

在模塊化工程項目項目中使用VueRouter，必須通過createApp(App).use(router)顯式地使用路由功能。在Vue3.x下，項目的src/router/index.js文件中使用下列語句來使用路由功能。參考代碼如下：import{createRouter,createWebHistory}from'vue-router'constroutes=[

{path:'/home',name:'Home',component:Home},{…}]constrouter=createRouter({

history:createWebHistory(),

routes})exportdefaultrouter8.1.2VueRouter基礎(chǔ)應(yīng)用1．路由頁面的實現(xiàn)

在App.vue的模板中常用VueRouter的組件有router-link、router-view。語法介紹如下：router-link標記（組件）

在App.vue文件中通常需要使用router-link組件來設(shè)計導(dǎo)航，并通過傳入“to”屬性來指定鏈接。組件語法如下：<router-linkto="/home">首頁</router-link><router-linkto="/about">關(guān)于我們</router-link><router-linkto="/download">資源下載</router-link>語法說明。<router-link></router-link>用于設(shè)計導(dǎo)航，默認會被渲染成一個<a></a>標記。to：表示可以跳轉(zhuǎn)頁面。router-view標記（組件）

<router-view></router-view>語法說明。router-view：表示路由出口。該組件用于將匹配到組件（相當于鏈接的頁面）渲染在這里。2.script標記中配置路由

通常路由配置一般在工程項目中的src/router/index.js中進行。首先需要導(dǎo)入vue-router模塊，并通過createRouter({routes}),然后再定義路由組件、定義路由、創(chuàng)建路由實例、傳入路由參數(shù)等。具體配置步驟如下：(1)定義/導(dǎo)入路由組件。

當組件內(nèi)容比較簡單時，可以直接在index.js中進行定義；當組件內(nèi)容較為復(fù)雜時，建議單獨建立組件文件，然后導(dǎo)入到其中來。組件定義方法如下：//組件不復(fù)雜時，可以直接定義在其中constHome={template:'<div><h3>首頁</h3><p>…</p></div>'}//或者使用Vue.extend()創(chuàng)建的組件構(gòu)造器constAbout=Vue.extend({template:`<ul><li></li></ul>`,//使用反單引號})//組件復(fù)雜時，需單獨定義組件并導(dǎo)入組件importHomefrom'./home‘importAboutfrom'./about'8.1.2VueRouter基礎(chǔ)應(yīng)用(2)定義路由。

在index.js文件中必須定義routes（路由組合），它是數(shù)組變量，每一條路由（對象{path:‘’,component:‘’}）就是其中的成員之一。每條路由通常包含兩個基本屬性，分別是path（路徑）、component（組件）屬性。定義格式如下：constroutes=[{path:'/home',component:Home},{path:'/about',component:About},{path:'/download',component:Download}]8.1.2VueRouter基礎(chǔ)應(yīng)用

（3）創(chuàng)建router實例，然后傳routes配置。在Vue2.6.x中創(chuàng)建方法

創(chuàng)建router對路由進行管理，它是由構(gòu)造函數(shù)newRouter()創(chuàng)建，接受routes參數(shù)。exportdefaultnewRouter({ routes:routes//簡寫routes})

然后在根實例中注冊路由。

通常在main.js文件中創(chuàng)建根實例，并將router注冊進來，這樣就可以使用路由。參考代碼如下：importrouterfrom'./router'//導(dǎo)入路由組件newVue({el:'#app',

router,components:{App},template:'<App/>'})

8.1.2VueRouter基礎(chǔ)應(yīng)用在Vue3.x中創(chuàng)建方法

在項目src/router/index.js中創(chuàng)建router對路由進行管理，它是由createRouter({})創(chuàng)建，接受routes參數(shù)。import{createRouter,createWebHistory}from'vue-router'constrouter=createRouter({

history:createWebHistory(),

routes})exportdefaultrouter

在項目入口文件main.js中創(chuàng)建Vue實例，導(dǎo)入router并使用router，這樣就可以使用路由。參考代碼如下：import{createApp}from'vue'importAppfrom'./App.vue'importrouterfrom'./router'createApp(App).use(router).mount('#app')【例8-1】VueRouter基礎(chǔ)實戰(zhàn)—多組件切換渲染。1．項目初始化。

在命令行窗口下，輸入如下命令，完成vue-router-1項目的初始化構(gòu)建工作。創(chuàng)建完成后在瀏覽器的URL中輸入http://localhost:8080，可以查看初始頁面。

vuecreatevue-router-1cdvue-router-1npmrunserve8.1.2VueRouter基礎(chǔ)應(yīng)用2．修改src/router/index.js文件，增加新路由。代碼如下：3．重新編輯App.vue文件。設(shè)計3個導(dǎo)航，并實現(xiàn)路由渲染。代碼如下：4.重新編輯main.js文件。與Vue2.6.x項目中的main.js有區(qū)別。5.src/views子文件夾下視圖組件的定義。有3個組件，分別是HomeView.vue、AoutView.vue和BookView.vue。組件定義如下：HomeView.vue組件。【例8-1】VueRouter基礎(chǔ)實戰(zhàn)BookView.vue組件。AboutView.vue組件。6．上述步驟完成后，切換到瀏覽器界面，刷新頁面，如下圖所示?？梢钥吹?lt;router-link></router-link>標記被渲染為<a></a>標記。注意：路由中有三個基本的概念，分別是

route、routes、router。route：它是一條路由，使用{…}來定義，內(nèi)含兩個屬性，分別是path、component,實現(xiàn)路由與組件的映射。routes：它是一組路由，把每一條路由組合起來，形成一個數(shù)組，也稱為路由表，類似于[route1,route2,…]。router:它是路由管理器，用來管理路由。當用戶點擊導(dǎo)航時，路由器會到routes中去查找，去找到對應(yīng)的路由組件，頁面中就顯示對應(yīng)組件的內(nèi)容。路由中有三個基本的概念8.2VueRouter高級應(yīng)用8.2.1動態(tài)路由匹配問題導(dǎo)入：當需要把某種模式匹配到的所有路由，全都映射到同一個組件時，該如何處理呢？（例如，有一個User組件，對于所有username各不相同的用戶，都要使用這個組件來渲染。怎么才能實現(xiàn)呢？）解決方案：可以在vue-router的路由路徑中使用“動態(tài)路徑參數(shù)”(dynamicsegment，例如path:‘/user/:username’)來達到這個效果。

定義后/user/chujiulang和/user/liyiang等用戶都將映射到相同的路由。

一個“路徑參數(shù)”使用冒號:標記。當匹配到一個路由時，參數(shù)值會被設(shè)置到this.$route.params，可以在每個組件內(nèi)使用。于是，可以更新User的模板，輸出當前用戶的username。

在一個路由中還可以設(shè)置多段“路徑參數(shù)”，對應(yīng)的值都會設(shè)置到$route.params中。例如在路由中定義路徑path為“/user/:username/post/:post_id”，則對應(yīng)的訪問路徑為“/usr/evan/post/123”，此時$route.params中保存對象為{username:'evan',post_id:'123'}。$route路由信息對象表示當前激活的路由的狀態(tài)信息，每次成功的導(dǎo)航后都會產(chǎn)生一個新的對象。$route對象還提供了其它有用的信息如表所示8.2.1動態(tài)路由匹配序號參數(shù)名稱參數(shù)說明1$route.path字符串，對應(yīng)當前路由的路徑，總是解析為絕對路徑，如“/user/chu”。2$route.params一個key/value對象，包含了動態(tài)片段和全匹配片段，如果沒有路由參數(shù)，就是一個空對象。3$route.query一個key/value對象，表示URL查詢參數(shù)。例如，對于路徑/foo?user=1，則有$route.query.user==1，如果沒有查詢參數(shù)，則是個空對象。4$route.hash當前路由的hash值(不帶#)，如果沒有hash值，則為空字符串。也稱為錨點5$route.fullPath完成解析后的URL，包含查詢參數(shù)和hash的完整路徑。6$route.matched數(shù)組，包含當前匹配的路徑中所包含的所有片段所對應(yīng)的配置參數(shù)對象。7$當前路徑名字8$route.meta路由元信息【例8-2】VueRouter高級應(yīng)用實戰(zhàn)

動態(tài)路徑參數(shù)設(shè)置。實現(xiàn)步驟和代碼如下。1．項目初始化。

在命令行窗口下，輸入如下命令，完成vue-router-2項目的初始化構(gòu)建工作。

vuecreatevue-router-2cdvue-router-2npmrunserve

2．修改App.vue文件，在vue-router-2項目中增加動態(tài)路由配置。

分別進行單段動態(tài)路徑參數(shù)和多段動態(tài)路徑參數(shù)的設(shè)置。在template標記中增加部分代碼如下：<!--

以下為動態(tài)路由配置，使用不同的to屬性

,單段動態(tài)路徑-->

<router-link

to="/user/儲久良">用戶(儲久良)</router-link>

<router-link

to="/user/陳云">用戶(陳云)</router-link>

<!--

多段動態(tài)路徑

-->

<router-link

to="/userA/李陽春/post/1100001">用戶(多段)</router-link>

<router-link

to="/userA/李陽春/post/1100002">用戶(多段)</router-link>

3．修改src/router/index.js文件，在增加兩條路由，映射組件分別為UserView.vue、UserManyView.vue。【例8-2】VueRouter高級應(yīng)用實戰(zhàn)UserManyView.vue組件UserView.vue組件4．main.js主入口文件import

{

createApp

}

from

"vue";

import

App

from

"./App.vue";

import

router

from

"./router";

createApp(App).use(router).mount("#app");

5．上述文件修改完成后，重新刷新一下頁面，效果如圖8-6所示?！纠?-2】VueRouter高級應(yīng)用實戰(zhàn)6．分別切換每個導(dǎo)航（基礎(chǔ)路由和單、多段路由），匹配到的路由組件被渲染出來。8.2.2嵌套路由嵌套路由顧名思義就是路由的多層嵌套，也稱為“子路由”。實際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。

創(chuàng)建嵌套路由的步驟如下：1．首先，在App.vue中定義基礎(chǔ)路由（父路由）導(dǎo)航。部分代碼如下：2．其次，在router/index.js中定義路由（含子路由）組件。

復(fù)雜的路由組件可以在router文件夾下創(chuàng)建view子文件夾，并在view子文件夾下創(chuàng)建所有的路由組件或僅需要創(chuàng)建復(fù)雜的路由組件。以下定義Product路由組件（產(chǎn)品介紹），其中包含嵌套路由。3．最后，完成所有路由組件的定義，并在router/index.js中定義routes,其中需要使用定義嵌套路由。子路由的定義格式與基礎(chǔ)路由相同。只是在path屬性值中不需要使用“/”。const

routes

=

[{

...

path:

'/product',

component:

Product,

//以下定義子路由

children:

[

//默認的空子路由

{

path:

'',

component:

Phone

},

{

path:

'phone',

component:

Phone

},

{

path:

'appliances',

component:

Appliances

},

...

]

},

]

8.2.2嵌套路由-24．創(chuàng)建路由實例，并將routes傳入其中，然后通過exportdefault暴露出來即可。通常還需要定義匹配不到任何路由時，可以設(shè)置重定向到某一個路由（如home）。

路由記錄格式如下：//

匹配不到路由時重定向到首頁

{

path:

'/',

redirect:

'/home'

}

【例8-3】VueRouter高級應(yīng)用實戰(zhàn)--嵌套路由的應(yīng)用。創(chuàng)建項目vue-router-3，步驟如【例8-2】。1．定義App.vue文件。8.2.2嵌套路由-32．定義router/index.js文件。8.2.2嵌套路由-43．定義main.js文件。4．在views子文件夾下，分別新建Book.vue、Book1.vue、Book2.vue、Book3.vue，修改組件About.vue、Home.vue。各組件的定義如下:8.2.2嵌套路由-55．在命令行窗口中，切換到項目所在的文件夾vue-router-3下，執(zhí)行npmrunserve命令，然后打開瀏覽器，輸入URL為http://localhost:8080。6．切換導(dǎo)航到“圖書”，在路由出口中會顯示出3個子路由，默認顯示第一個子路由，單擊嵌套路由時，嵌套路由出口中顯示對應(yīng)的圖書和簡介。8.2.2嵌套路由-58.2.3編程式導(dǎo)航

除了使用<router-link:to="..."></router-link>創(chuàng)建a標記來定義導(dǎo)航鏈接，也可以借助router(或this.$router)的實例方法，通過編寫代碼來實現(xiàn)。常用的router的實例方法如表所示。序號Router實例方法名稱使用說明1router.push()跳轉(zhuǎn)到新的路由地址，在歷史記錄中添加一條新的記錄2router.replace()跳轉(zhuǎn)到新的路由地址，替換當前的歷史記錄3router.go(n)N為整數(shù)，在歷史記錄中向前或者后退n步4router.forward()在歷史中前進一步,相當于router.go(1)5router.back()在歷史中后退一步,相當于router.go(-1)1.router.push()方法router.push()方法參數(shù)類型為字符串、對象。語法如下://

字符串

router.push('home')

//

對象

router.push({

path:

'home'

})

//

命名的路由

router.push({

name:

'user',

params:

{

userId:

'123'

}})

//

帶查詢參數(shù)，變成

/register?plan=private

router.push({

path:

'register',

query:

{

plan:

'private'

}})

注意：在router.push()方法中，參數(shù)中如果提供了path，則params會被忽略?？梢允褂胣ame與params配對使用，path與query配對使用。2.router.replace()方法

與router.push()相似，唯一不同是它不會向history添加新記錄，而是替換掉當前的history記錄。<router-link:to="..."replace>聲明式導(dǎo)航</router-link>//聲明式導(dǎo)航this.$router.replace(...)//組件外編程式導(dǎo)航router.replace(…)//編程式導(dǎo)航

3．其它router的實例方法router.go(n)//跳轉(zhuǎn)n步router.forward()//前進一步router.back()//后退一步8.2.3編程式導(dǎo)航【例8-4】VueRouter高級應(yīng)用實戰(zhàn)--編程式導(dǎo)航的應(yīng)用。創(chuàng)建項目vue-router-4，參照【例8-3】，復(fù)制所有代碼到該項目中。僅需要修改App.vue文件，其它文件與【例8-3】相同。第11～13行在這標記中定義3個button按鈕，通過v-on:click綁定3個方法，分別是goAbput、goBook2、goHome。8.2.4命名路由constrouter=createRouter({

routes:

[

{

path:

'/user/:userId',

name:

'user',

//命名路由

component:

User

}

]

})

通?？梢酝ㄟ^一個名稱（name）來標識一個路由route會顯得更為方便一些，特別是在鏈接一個路由，或者是執(zhí)行一些跳轉(zhuǎn)的時?？梢栽趧?chuàng)建Router實例的時，在

routes

配置中給某個路由設(shè)置名稱name。

如果需要鏈接到一個命名路由，可以給

router-link

的

to

屬性傳一個對象。格式如下：<router-link:to=“{name:‘user’,params:{userId:‘1200034’}}">User</router-link>

這與編程式調(diào)用router.push()功能相同。格式如下：router.push({name:‘user’,params:{userId:‘1200034’}})

以上兩種方式都會把路由導(dǎo)航到/user/1200034路徑。演示：在【例8-4】上修改App.vue中的路由導(dǎo)航中”/home”和”/about”。

可以在路由出口組件上應(yīng)用過渡效果(transition組件去包裹router-view組件)。8.2.5命名視圖

有時想同時（同級）展示多個視圖，而不是嵌套展示。例如創(chuàng)建一個布局，有sidebar（側(cè)導(dǎo)航）和main（主內(nèi)容）兩個視圖，這時命名視圖就會派上用場?？梢栽诮缑嬷袚碛卸鄠€單獨命名的視圖，而不是只有一個單獨的出口。如果router-view沒有設(shè)置名字，那么默認為default。

格式如下：<router-viewclass="viewone"></router-view><router-viewclass="viewtwo"name="s"></router-view><router-viewclass="viewthree"name="t"></router-view>

一個視圖使用一個組件渲染，因此對于同一個路由，多個視圖就需要多個組件。確保正確使用

components

配置（帶上s）。格式如下：constrouter=createRouter({

routes:

[

{

path:

'/',

components:

{

default:User,

//User組件的名字

s:

Students,

//Students是組件的名字

t:

Teachers

//Teachers

是組件的名字

}

}

]

})

演示：vuecreatevue-ruoter-5，在項目中修改App.vue和router/index.js8.2.5命名視圖嵌套命名視圖

有時可能會使用命名視圖創(chuàng)建嵌套視圖的復(fù)雜布局。這時需要命名用到的嵌套router-view組件。以設(shè)置一個面板為例，如圖所示。Nav只是一個常規(guī)組件。UserSettings是一個視圖組件。UserEmailsSubscriptions、UserProfile、UserProfilePreview是嵌套的視圖組件。不使用HTML/CSS來做具體的布局，而是專注使用組件來實現(xiàn)。

在UserSettings

組件的

<template>

部分，類似代碼如下：<!--

UserSettings.vue

-->

<div>

<h1>User

Settings</h1>

<NavBar/>

<router-view/>

<router-view

name="helper"/>

</div>

然后可以用這個路由配置完成該布局。部分代碼如下：{

path:

'/settings',

//

可以在頂級路由就配置命名視圖

component:

UserSettings,

children:

[{

path:

'emails',

component:

UserEmailsSubscriptions

},

{

path:

'profile',

components:

{

default:

UserProfile,

helper:

UserProfilePreview

}

}]

}

這樣即可以完成使用嵌套命名視圖來設(shè)置一個面板。8.2.5命名視圖演示：vuecreatevue-ruoter-5，在項目中修改App.vue和router/index.js8.2.6重定向和別名重定向

重定向也是通過routes配置來完成，下面例子是從/a重定向到/b。部分代碼如下：const

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

'/b'

}

]

})

重定向的目標也可以是一個命名的路由。部分代碼如下：const

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

{

name:

'foo'

}}

]

})

甚至也可以是一個方法，動態(tài)返回重定向目標。部分代碼如下：const

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

to

=>

{

//

方法接收目標路由作為參數(shù)

//

return

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

}}

]

})

注意：導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標上?？梢詾?a路由添加一個beforeEach（router.beforeEach((to,from,next)=>{...})）或beforeLeave守衛(wèi)并不會有任何效果。別名“重定向”是指當用戶訪問/a時，URL將會被替換成/b，然后匹配路由為/b，那么“別名”又是什么呢？/a的別名是/b，意味著，當用戶訪問/b時，URL會保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣。上面對應(yīng)的路由配置修改如下：const

router

=

createRouter({

routes:

[

{

path:

'/a',

component:

A,

alias:

'/b'

}

//alias屬性作用是起別名

]

})

“別名”的功能讓可以自由地將UI結(jié)構(gòu)映射到任意的URL，而不是受限于配置的嵌套路由結(jié)構(gòu)。8.2.6重定向和別名vue-router默認hash模式--使用URL的hash來模擬一個完整的URL，于是當URL改變時，頁面不會重新加載。如果不想使用hash(#)模式，可以用路由的history模式，這種模式充分利用history.pushStateAPI來完成URL跳轉(zhuǎn)而無須重新加載頁面。import

{

createRouter,

createWebHistory

}

from

"vue-router";

const

router

=

createRouter({

history:

createWebHistory(),

routes,

});

當使用history模式時，URL就像正常的URL，例如/user/id。不過這種模式還需要后臺配置支持。因為是單頁客戶端應(yīng)用，如果后臺沒有正確的配置，當用戶在瀏覽器直接訪問/user/id就會返回404。

綜上所述，要在服務(wù)端增加一個覆蓋所有情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回同一個index.html頁面，這個頁面就是App依賴的頁面。8.2.7HTML5History模式8.2.8路由組件傳參(選講)

在組件中使用$route會使之與其對應(yīng)路由形成高度耦合，從而使組件只能在某些特定的URL上使用，限制了組件的靈活性，但可以通過props配置來解除這種行為。以解耦的方式使用

props

進行參數(shù)傳遞，主要是在路由配置中進行操作。

使用

props

將組件和路由解耦：取代與

$route

的耦合const

User

=

{

//組件內(nèi)使用$route獲取參數(shù)

template:

'<div>User

{{

$route.params.id

}}</div>'

}

const

router

=

createRouter({

routes:

[

{

path:

'/user/:id',

component:

User

}

]

})

通過

props

解耦const

User

=

{

//組件中使用props傳值

props:

['id'],

template:

'<div>User

{{

id

}}</div>'

}

const

router

=

createRouter({

routes:

[

{

path:

'/user/:id',

component:

User,

props:

true

},

//設(shè)置props屬性值為true

//

對于包含命名視圖的路由，必須分別為每個命名視圖添加

`props`

選項：

{

path:

'/user/:id',

components:

{

default:

User,

sidebar:

Sidebar

},

props:

{

default:

true,

sidebar:

false

}

}

]

})

這樣便可以在任何地方使用該組件，使得該組件更易于重用和測試。8.2.8路由組件傳參1.布爾模式

如果props被設(shè)置為true，route.params將會被設(shè)置為組件props。例如，通過

$route

的方式獲取動態(tài)字段

id

。代碼如下：const

User

=

{

template:

'<div>User

{{

$route.params.id

}}</div>'}

const

routes

=

[{

path:

'/user/:id',

component:

User

}]

將上面的代碼替換成props的形式。代碼如下：const

User

=

{

props:

['id'],

//

組件中通過

props

獲取

id

template:

'<div>User

{{

id

}}</div>'

}

//

路由配置中，增加

props

字段，并將值設(shè)置為

true

const

routes

=

[{

path:

'/user/:id',

component:

User,

props:

true

}]

注意：對于有命名視圖的路由，必須為每個命名視圖定義

props

配置.。代碼如下：const

routes

=

[

{

path:

'/user/:id',

components:

{

default:

User,

sidebar:

Sidebar

},

//

為User提供props

props:

{

default:

true,

sidebar:

false

}

}

]

2.對象模式

如果props是一個對象，它會被按原樣設(shè)置為組件屬性。當props是靜態(tài)的時候有用。路由配置const

routes

=

[

{

path:

'/hello',

component:

Hello,

props:

{

name:

'World'