vue中的路由傳值與重調(diào)本路由改變參數(shù)
一.vue路由傳值
在日常使用vue操作時(shí)，某些場(chǎng)景需要用到路由之間的傳值，就是在使用router跳轉(zhuǎn)到另外一個(gè)路由時(shí)需要攜帶參數(shù)一并傳過(guò)去，這時(shí)候就需要用到路由傳值
這里用舉例的形式展示幾種方法：
先來(lái)看看router文件
const routes = [{
? ? path: '/',
? ? component: A
? },
? {
? ? path: '/B',
? ? component: B
? },
]在這里我們需要在A路由跳轉(zhuǎn)到B路由并攜帶一些值過(guò)去
方法一：（問(wèn)號(hào)傳值）
在A路由中定義事件或使用<router-link>，這里使用事件展示：
this.$router.push("B?id=1");在B路由中獲取傳遞的值：
console.log(this.$route.query.id);
方法二：query（此方法query的值會(huì)顯示在地址欄中）
在A路由中定義事件或使用<router-link>，這里使用事件展示：
?this.$router.push({
? ? ? ? path: "B",
? ? ? ? query: {
? ? ? ? ? id: 1,
? ? ? ? ? name: "litiezhu",
? ? ? ? },
? ? ? });query方式與方法一一樣，在B組件中都是通過(guò)query方法獲取值：
console.log(this.$route.query);
此時(shí)頁(yè)面開(kāi)發(fā)者工具中的Console中顯示：
{id: 1, name: 'litiezhu'}方法三：params（此方法頁(yè)面刷新數(shù)據(jù)會(huì)丟失）
在A路由中定義事件或使用<router-link>，這里使用事件展示，name必須與router文件定義的name名稱(chēng)一樣：
this.$router.push({
? ? ? ? path: "B",
? ? ? ? params: {
? ? ? ? ? id: 1,
? ? ? ? ? name: "litiezhu",
? ? ? ? },
});在B組件中通過(guò)params方法獲取值：
console.log(this.$route.params);
方法四：動(dòng)態(tài)路由（此方法頁(yè)碼刷新數(shù)據(jù)不會(huì)丟失,推薦此方法?。?/h3>
1.配置router文件
const routes = [{
? ? path: '/',
? ? component: A
? },
? {
? ? path: '/B/:id',
? ? component: B
? },
]2.在需要跳轉(zhuǎn)的頁(yè)面中
this.$router.push(/B/1);
3.在B組件中通過(guò)params方法獲取值：
console.log(this.$route.params.id);
4.此時(shí)url地址顯示為：
http://localhost:8080/#/B/1
二.重調(diào)本路由改變參數(shù)
有時(shí)候需要改變自己路由的參數(shù)來(lái)達(dá)到自己重調(diào)自己，舉個(gè)例子：
小說(shuō)網(wǎng)站的點(diǎn)擊上下章節(jié)切換
其實(shí)就是在內(nèi)部的單擊事件中重調(diào)了自己的路由，不過(guò)傳遞的值不一樣,點(diǎn)擊后地址變?yōu)椋?/p>
1.使用query方法，而不用再path指定路徑了：
this.$router.push({ query: { id: 2 } });url地址顯示為：
http://localhost:8080/#/B/1?id=2
2.使用params方法，同樣也不用再path指定路徑了：
this.$router.push({ params: { id: 2 } })url地址顯示為：
http://localhost:8080/#/B/2
若要實(shí)現(xiàn)點(diǎn)擊上下章切換不同的小說(shuō)內(nèi)容的功能，可以將query的id值進(jìn)行加減，并重新調(diào)用后端接口獲取數(shù)據(jù)來(lái)實(shí)現(xiàn)功能。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Composition Api封裝業(yè)務(wù)hook思路示例分享
這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue動(dòng)畫(huà)效果實(shí)現(xiàn)方法示例
這篇文章主要介紹了vue動(dòng)畫(huà)效果實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了vue.js+animate.css實(shí)現(xiàn)的動(dòng)畫(huà)切換效果相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
本篇文章主要介紹了vue-router：嵌套路由的使用方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
本文主要介紹了VUE 自定義取色器組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解，需要的朋友們可以學(xué)習(xí)下。2020-03-03
關(guān)于vue-cli 3配置打包優(yōu)化要點(diǎn)（推薦）
這篇文章主要介紹了vue-cli 3配置打包優(yōu)化要點(diǎn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法
這篇文章主要介紹了vuejs在解析時(shí)出現(xiàn)閃爍的原因及防止閃爍的方法,本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
AntV F2和vue-cli構(gòu)建移動(dòng)端可視化視圖過(guò)程詳解
這篇文章主要介紹了AntV F2和vue-cli構(gòu)建移動(dòng)端可視化視圖過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10
Vue3實(shí)現(xiàn)動(dòng)態(tài)切換Menu的示例代碼
本文介紹了在Vue3項(xiàng)目中使用頂部導(dǎo)航欄和側(cè)邊欄,通過(guò)頂部導(dǎo)航控制側(cè)邊欄的生成,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫(xiě)ajax請(qǐng)求
之前給大家介紹了jQuery利用最優(yōu)雅的方式寫(xiě)ajax請(qǐng)求的相關(guān)內(nèi)容，這篇文章主要給大家介紹了關(guān)于axios進(jìn)階實(shí)踐之利用最優(yōu)雅的方式寫(xiě)ajax請(qǐng)求的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-12-12