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

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

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

可以訪問/vue-router@4.2.5/dist/vue-router.global.js，然后右單擊頁(yè)面，選擇“網(wǎng)頁(yè)另存為”菜單或在當(dāng)前頁(yè)面上按“Ctrl+S”，將vue-router.global.js保存在自己開發(fā)的文件夾下，也可以直接使用CDN資源，然后在項(xiàng)目中引用它。引用格式如下：<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

在模塊化工程項(xiàng)目項(xiàng)目中使用VueRouter，必須通過createApp(App).use(router)顯式地使用路由功能。在Vue3.x下，項(xiàng)目的src/router/index.js文件中使用下列語(yǔ)句來使用路由功能。參考代碼如下：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．路由頁(yè)面的實(shí)現(xiàn)

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

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

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

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

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

在index.js文件中必須定義routes（路由組合），它是數(shù)組變量，每一條路由（對(duì)象{path:‘’,component:‘’}）就是其中的成員之一。每條路由通常包含兩個(gè)基本屬性，分別是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實(shí)例，然后傳routes配置。在Vue2.6.x中創(chuàng)建方法

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

然后在根實(shí)例中注冊(cè)路由。

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

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

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

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

history:createWebHistory(),

routes})exportdefaultrouter

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

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

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

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

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

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

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

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

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

vuecreatevue-router-2cdvue-router-2npmrunserve

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

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

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

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

<router-link

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

<router-link

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

<!--

多段動(dòng)態(tài)路徑

-->

<router-link

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

<router-link

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

3．修改src/router/index.js文件，在增加兩條路由，映射組件分別為UserView.vue、UserManyView.vue。【例8-2】VueRouter高級(jí)應(yīng)用實(shí)戰(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．上述文件修改完成后，重新刷新一下頁(yè)面，效果如圖8-6所示?！纠?-2】VueRouter高級(jí)應(yīng)用實(shí)戰(zhàn)6．分別切換每個(gè)導(dǎo)航（基礎(chǔ)路由和單、多段路由），匹配到的路由組件被渲染出來。8.2.2嵌套路由嵌套路由顧名思義就是路由的多層嵌套，也稱為“子路由”。實(shí)際生活中的應(yīng)用界面，通常由多層嵌套的組件組合而成。

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

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

routes

=

[{

...

path:

'/product',

component:

Product,

//以下定義子路由

children:

[

//默認(rèn)的空子路由

{

path:

'',

component:

Phone

},

{

path:

'phone',

component:

Phone

},

{

path:

'appliances',

component:

Appliances

},

...

]

},

]

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

路由記錄格式如下：//

匹配不到路由時(shí)重定向到首頁(yè)

{

path:

'/',

redirect:

'/home'

}

【例8-3】VueRouter高級(jí)應(yīng)用實(shí)戰(zhàn)--嵌套路由的應(yīng)用。創(chuàng)建項(xià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．在命令行窗口中，切換到項(xiàng)目所在的文件夾vue-router-3下，執(zhí)行npmrunserve命令，然后打開瀏覽器，輸入U(xiǎn)RL為http://localhost:8080。6．切換導(dǎo)航到“圖書”，在路由出口中會(huì)顯示出3個(gè)子路由，默認(rèn)顯示第一個(gè)子路由，單擊嵌套路由時(shí)，嵌套路由出口中顯示對(duì)應(yīng)的圖書和簡(jiǎn)介。8.2.2嵌套路由-58.2.3編程式導(dǎo)航

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

字符串

router.push('home')

//

對(duì)象

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會(huì)被忽略?？梢允褂胣ame與params配對(duì)使用，path與query配對(duì)使用。2.router.replace()方法

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

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

routes:

[

{

path:

'/user/:userId',

name:

'user',

//命名路由

component:

User

}

]

})

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

routes

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

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

router-link

的

to

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

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

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

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

有時(shí)想同時(shí)（同級(jí)）展示多個(gè)視圖，而不是嵌套展示。例如創(chuàng)建一個(gè)布局，有sidebar（側(cè)導(dǎo)航）和main（主內(nèi)容）兩個(gè)視圖，這時(shí)命名視圖就會(huì)派上用場(chǎng)。可以在界面中擁有多個(gè)單獨(dú)命名的視圖，而不是只有一個(gè)單獨(dú)的出口。如果router-view沒有設(shè)置名字，那么默認(rèn)為default。

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

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

components

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

routes:

[

{

path:

'/',

components:

{

default:User,

//User組件的名字

s:

Students,

//Students是組件的名字

t:

Teachers

//Teachers

是組件的名字

}

}

]

})

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

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

在UserSettings

組件的

<template>

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

UserSettings.vue

-->

<div>

<h1>User

Settings</h1>

<NavBar/>

<router-view/>

<router-view

name="helper"/>

</div>

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

path:

'/settings',

//

可以在頂級(jí)路由就配置命名視圖

component:

UserSettings,

children:

[{

path:

'emails',

component:

UserEmailsSubscriptions

},

{

path:

'profile',

components:

{

default:

UserProfile,

helper:

UserProfilePreview

}

}]

}

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

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

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

'/b'

}

]

})

重定向的目標(biāo)也可以是一個(gè)命名的路由。部分代碼如下：const

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

{

name:

'foo'

}}

]

})

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

router

=

createRouter({

routes:

[

{

path:

'/a',

redirect:

to

=>

{

//

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

//

return

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

}}

]

})

注意：導(dǎo)航守衛(wèi)并沒有應(yīng)用在跳轉(zhuǎn)路由上，而僅僅應(yīng)用在其目標(biāo)上。可以為/a路由添加一個(gè)beforeEach（router.beforeEach((to,from,next)=>{...})）或beforeLeave守衛(wèi)并不會(huì)有任何效果。別名“重定向”是指當(dāng)用戶訪問/a時(shí)，URL將會(huì)被替換成/b，然后匹配路由為/b，那么“別名”又是什么呢？/a的別名是/b，意味著，當(dāng)用戶訪問/b時(shí)，URL會(huì)保持為/b，但是路由匹配則為/a，就像用戶訪問/a一樣。上面對(duì)應(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默認(rèn)hash模式--使用URL的hash來模擬一個(gè)完整的URL，于是當(dāng)URL改變時(shí)，頁(yè)面不會(huì)重新加載。如果不想使用hash(#)模式，可以用路由的history模式，這種模式充分利用history.pushStateAPI來完成URL跳轉(zhuǎn)而無須重新加載頁(yè)面。import

{

createRouter,

createWebHistory

}

from

"vue-router";

const

router

=

createRouter({

history:

createWebHistory(),

routes,

});

當(dāng)使用history模式時(shí)，URL就像正常的URL，例如/user/id。不過這種模式還需要后臺(tái)配置支持。因?yàn)槭菃雾?yè)客戶端應(yīng)用，如果后臺(tái)沒有正確的配置，當(dāng)用戶在瀏覽器直接訪問/user/id就會(huì)返回404。

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

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

props

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

使用

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

//

對(duì)于包含命名視圖的路由，必須分別為每個(gè)命名視圖添加

`props`

選項(xiàng)：

{

path:

'/user/:id',

components:

{

default:

User,

sidebar:

Sidebar

},

props:

{

default:

true,

sidebar:

false

}

}

]

})

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

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

$route

的方式獲取動(dòng)態(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

}]

注意：對(duì)于有命名視圖的路由，必須為每個(gè)命名視圖定義

props

配置.。代碼如下：const

routes

=

[

{

path:

'/user/:id',

components:

{

default:

User,

sidebar:

Sidebar

},

//

為User提供props

props:

{

default:

true,

sidebar:

false

}

}

]

2.對(duì)象模式

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

routes

=

[

{

path:

'/hello',

component:

Hello,

props:

{

name:

'World'