目錄
1 相關(guān)理解
1.1 對(duì) vue-router 的理解
1.2 對(duì) SPA 應(yīng)用的理解
1.3?對(duì)路由的理解
1.3.1 什么是路由？
1.3.2 路由的分類(lèi)
2 幾個(gè)注意點(diǎn)
3 路由的基本使用
4 嵌套 (多級(jí)) 路由
5 路由傳參
5.1 query 方式傳參
5.1.1?跳轉(zhuǎn)路由并攜帶query參數(shù)， to的字符串寫(xiě)法
5.1.2?跳轉(zhuǎn)路由并攜帶query參數(shù)， to的對(duì)象寫(xiě)法
5.2 給路由命名
5.3 params方式傳參
5.3.1?跳轉(zhuǎn)路由并攜帶params參數(shù)， to的字符串寫(xiě)法
5.3.2?跳轉(zhuǎn)路由并攜帶params參數(shù)， to的對(duì)象寫(xiě)法
5.4 props配置，實(shí)現(xiàn)傳參
5.4.1 props配置方式1
5.4.2 props配置方式2
5.4.3 props配置方式3
6 路由的replace屬性
7 路由的編程式導(dǎo)航
8 緩存路由組件
9 兩個(gè)新的生命周期鉤子
10 全局路由守衛(wèi)（前置和后置路由守衛(wèi)）
11?獨(dú)享路由守衛(wèi)
12 組件內(nèi)守衛(wèi)
13 路由的兩種工作模式
1 相關(guān)理解
1.1 對(duì) vue-router 的理解
是vue的一個(gè)插件庫(kù)，專(zhuān)門(mén)用來(lái)實(shí)現(xiàn)SPA應(yīng)用
1.2 對(duì) SPA 應(yīng)用的理解
1. 單頁(yè)Web應(yīng)用 （Single Page Web Application,? SPA）
2.? 整個(gè)應(yīng)用只有一個(gè)完整的頁(yè)面
3. 點(diǎn)擊頁(yè)面的導(dǎo)航鏈接不會(huì)刷新頁(yè)面，只會(huì)作頁(yè)面的局部刷新
4. 數(shù)據(jù)需要通過(guò) ajax請(qǐng)求獲取
1.3?對(duì)路由的理解
1.3.1 什么是路由？
1. 一個(gè)路由就是一組映射關(guān)系 （key-value）
2. key為路徑，value可能是function 或者 component
1.3.2 路由的分類(lèi)
【1】后端路由
1）理解：value就是function，用于處理客戶(hù)端提交的請(qǐng)求
2）工作過(guò)程：服務(wù)器接收到一個(gè)請(qǐng)求，根據(jù)請(qǐng)求的路徑找到匹配的函數(shù)來(lái)處理請(qǐng)求，并返回響應(yīng)的數(shù)據(jù)
【2】前端路由
1）理解：value就是component，用于展示頁(yè)面內(nèi)容
2）工作過(guò)程：當(dāng)瀏覽器的路徑發(fā)生改變時(shí)，對(duì)應(yīng)的組件就會(huì)顯示
2 幾個(gè)注意點(diǎn)
3 路由的基本使用
【1】創(chuàng)建整個(gè)應(yīng)用的路由器
?【2】在main.js入口文件中引入
【3】App組件
4 嵌套 (多級(jí)) 路由
【1】router文件夾下的index.js文件中
【2】Home組件中
5 路由傳參
5.1 query 方式傳參
【1】先寫(xiě)個(gè)三級(jí)路由，讓其跳轉(zhuǎn)到Detail組件
【2】利用 query 將Message組件中的數(shù)據(jù)傳遞給組件Detail中
在Message組件中:
5.1.1?跳轉(zhuǎn)路由并攜帶query參數(shù)， to的字符串寫(xiě)法
對(duì) to 進(jìn)行數(shù)據(jù)綁定并使用模板字符串的寫(xiě)法
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)， to的字符串寫(xiě)法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{m.title}}</router-link>
</li>
</ul>
<!-- 展示內(nèi)容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{id:'001',title:'message001'},
{id:'002',title:'message002'},
{id:'003',title:'message003'}
]
}
},
}
</script>Detail組件中接收參數(shù)：
<template>
<div>
<h3>Detail</h3>
<ul>
<li>消息編號(hào)：{{ $route.query.id }}</li>
<li>消息內(nèi)容：{{$route.query.title}} </li>
</ul>
</div>
</template>
<script>
export default {
name: 'Detail',
}
</script>?
5.1.2?跳轉(zhuǎn)路由并攜帶query參數(shù)， to的對(duì)象寫(xiě)法
Message組件中：
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳轉(zhuǎn)路由并攜帶query參數(shù)， to的對(duì)象寫(xiě)法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
</li>
</ul>
<!-- 展示內(nèi)容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{id:'001',title:'message001'},
{id:'002',title:'message002'},
{id:'003',title:'message003'}
]
}
},
}
</script>Detail組件中：
<template>
<div>
<h3>Detail</h3>
<ul>
<li>消息編號(hào)：{{ $route.query.id }}</li>
<li>消息內(nèi)容：{{$route.query.title}} </li>
</ul>
</div>
</template>
<script>
export default {
name: 'Detail',
}
</script>【總結(jié)】
5.2 給路由命名
在上述使用query傳參中，使用 to 的對(duì)象形式傳參時(shí)，如果路徑很長(zhǎng)時(shí)，就很麻煩
所有我們就可以給路由命名，通過(guò)name 指定要跳轉(zhuǎn)的路徑
在Message中
5.3 params方式傳參
【1】配置路由，聲明接收params參數(shù)
?
【2】Message組件中傳遞參數(shù)
5.3.1?跳轉(zhuǎn)路由并攜帶params參數(shù)， to的字符串寫(xiě)法
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)， to的字符串寫(xiě)法 -->
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{m.title}}</router-link>
</li>
</ul>
<!-- 展示內(nèi)容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{id:'001',title:'message001'},
{id:'002',title:'message002'},
{id:'003',title:'message003'}
]
}
},
}
</script>5.3.2?跳轉(zhuǎn)路由并攜帶params參數(shù)， to的對(duì)象寫(xiě)法
使用對(duì)象形式傳參時(shí)：指定跳轉(zhuǎn)路徑，必須使用name配置項(xiàng), 不允許使用path配置項(xiàng)
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳轉(zhuǎn)路由并攜帶params參數(shù)， to的對(duì)象寫(xiě)法 -->
<router-link :to="{
name: 'xiangqing', // 如果使用params傳參這邊必須使用name, 不允許使用path
params:{
id:m.id,
title:m.title
}
}">
{{m.title}}
</router-link>
</li>
</ul>
<!-- 展示內(nèi)容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{id:'001',title:'message001'},
{id:'002',title:'message002'},
{id:'003',title:'message003'}
]
}
},
}
</script>【3】Detail組件接收參數(shù)
5.4 props配置，實(shí)現(xiàn)傳參
在router文件夾下的index.js文件中編寫(xiě)配置, 想傳遞參數(shù)給哪個(gè)組件，就給哪個(gè)組件加props配置
children: [ // 子路由的子路由(三級(jí)路由)
{
name: 'xiangqing',
path: 'detail',
component: Detail,
// props: ...
}
] 使用props配置傳參時(shí)，就會(huì)將接收的參數(shù)以props形式傳遞給目標(biāo)組件
5.4.1 props配置方式1
props的第一種寫(xiě)法，值為對(duì)象，該對(duì)象中的所有key、value都會(huì)以props形式傳遞給Detail組件
這種方式用的不多，因?yàn)橹荒軅鬟f固定值的參數(shù)?
Detail組件中接收參數(shù)并使用
?
5.4.2 props配置方式2
值為布爾值，若布爾值為真，就會(huì)把該路由組件收到的所有params參數(shù)，以props形式傳遞給Detail組件
缺點(diǎn)是只能傳遞params參數(shù)
接收方式跟上面一樣
?
5.4.3 props配置方式3
props的第三種寫(xiě)法，值為函數(shù)
推薦使用這種方式，因?yàn)閝uery參數(shù)和params參數(shù)都可以傳遞
?
6 路由的replace屬性
這個(gè)過(guò)程就相當(dāng)于壓棧的過(guò)程，push方式是將點(diǎn)擊的所有路徑都一次地壓入棧中，而replace方式是將當(dāng)前地路徑替換掉它之前地路徑
7 路由的編程式導(dǎo)航
作用：不借助<router-link>實(shí)現(xiàn)路由跳轉(zhuǎn)，讓路由跳轉(zhuǎn)更加靈活
【代碼1】?
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<button @click="pushShow(m)">push查看</button>
<button @click="replaceShow(m)">replace查看</button>
</li>
</ul>
<!-- 展示內(nèi)容 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'Message',
data() {
return {
messageList: [
{id:'001',title:'message001'},
{id:'002',title:'message002'},
{id:'003',title:'message003'}
]
}
},
methods: {
pushShow(m) {
this.$router.push({
name: 'xiangqing',
params:{
id: m.id,
title: m.title
}
})
},
replaceShow(m) {
this.$router.replace({
name: 'xiangqing',
params:{
id: m.id,
title: m.title
}
})
}
},
}
</script>
<style>
</style>?【代碼2】
<template>
<div class="col-xs-offset-2 col-xs-8">
<div class="page-header">
<h2>Vue Router Demo</h2>
<button @click="back">后退</button>
<button @click="forward">前進(jìn)</button>
</div>
</div>
</template>
<script>
export default {
name: 'Banner',
methods: {
back() {
// this.$router.back()
// go傳入的正數(shù)表示前進(jìn)的步數(shù)，負(fù)數(shù)表示后退的步數(shù)
this.$router.go(-1)
},
forward() {
// this.$router.forward()
this.$router.go(1)
}
},
}
</script>【總結(jié)】
8 緩存路由組件
當(dāng)一個(gè)組件中含有input表單時(shí)，如果用戶(hù)在表單中輸入了內(nèi)容，這時(shí)又點(diǎn)擊了另一個(gè)鏈接，此時(shí)當(dāng)前的組件就會(huì)被銷(xiāo)毀，在下一次訪(fǎng)問(wèn)該組件時(shí)，表單中的數(shù)據(jù)被清空了，如果用戶(hù)輸入了一些重要且長(zhǎng)的信息，這用戶(hù)體驗(yàn)是非常不好的。所以我們可以緩存路由組件解決這個(gè)問(wèn)題
News組件?
?
【總結(jié)】
?
9 兩個(gè)新的生命周期鉤子
10 全局路由守衛(wèi)（前置和后置路由守衛(wèi)）
在router文件夾下的index.js文件中
注意這邊的meta配置項(xiàng)
?
11?獨(dú)享路由守衛(wèi)
只有前置，沒(méi)有后置
12 組件內(nèi)守衛(wèi)
13 路由的兩種工作模式
有hash和history兩種工作模式，默認(rèn)是hash模式
如何修改為history模式？
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-831478.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-831478.html
到了這里，關(guān)于Vue-route核心知識(shí)整理的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
