vue-router跳轉(zhuǎn)方式的區(qū)別解析
一、router-link（聲明式路由，在頁(yè)面中調(diào)用）
在Vue中，router-link稱(chēng)為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過(guò)name，另一種是path。
1.1 路由不帶參數(shù)
<router-link :to="{ name: 'word' }">路由name方式跳轉(zhuǎn)首頁(yè)</router-link>
<router-link :to="{ path: '/word' }">路由path方式跳轉(zhuǎn)首頁(yè)</router-link>
1.2 路由帶參數(shù)跳轉(zhuǎn)
路由參數(shù)的傳遞主要有兩種方式一種是params，另一種是query，主要區(qū)別:
1. params傳參的參數(shù)不會(huì)顯示在跳轉(zhuǎn)的URL中，query傳參的參數(shù)會(huì)顯示在URL中。
2. params所傳的參數(shù)通過(guò)this.$route.params.參數(shù)；獲取，query所傳的參數(shù)通過(guò)this.$route.query.參數(shù) 獲取
3. 因?yàn)閜arams所傳遞的參數(shù)不顯示在URl中，所以在路由跳轉(zhuǎn)時(shí)推薦params方式進(jìn)行傳參
4. 都不能傳對(duì)象和數(shù)組引用類(lèi)型數(shù)據(jù)，只能傳字符串類(lèi)型數(shù)據(jù)
<router-link :to="{ name: 'home', params: { key: '1', value: '跳轉(zhuǎn)' } }">路由name,params方式跳轉(zhuǎn)首頁(yè)</router-link>
<router-link :to="{ name: 'home', query: { key: '1', value: '跳轉(zhuǎn)' } }">路由name,query方式跳轉(zhuǎn)首頁(yè)</router-link>
<router-link :to="{ path: '/home', params: { key: '1', value: '跳轉(zhuǎn)' } }">路由path,params方式跳轉(zhuǎn)首頁(yè)</router-link>
<router-link :to="{ path: '/home', query: { key: '1', value: '跳轉(zhuǎn)' } }">路由path,query方式跳轉(zhuǎn)首頁(yè)</router-link>
二、this.$router.push() (在函數(shù)里面調(diào)用)
2.1不帶參數(shù)跳轉(zhuǎn)
this.$router.push({ path: '/home'});
this.$router.push({ name: 'home'});
2.2帶參數(shù)跳轉(zhuǎn)
<a-button type="primary" @click="goTo">路由name方式跳轉(zhuǎn)</a-button>
goTo() {
this.$router.push({ name: 'home', params: { a: '1', b: '2' } });//推薦用params傳參方式
this.$router.push({ name: 'home', query: { a: '1', b: '2' } });
}
三、this.$router.resolve()打開(kāi)新窗口跳轉(zhuǎn)
3.1通過(guò)path形式跳轉(zhuǎn)
goTo() {
let routeData = this.$router.resolve({
path: '/home',
});
window.open(routeData.href, '_blank');
}
3.2通過(guò)name形式跳轉(zhuǎn)
goTo() {
let routeData = this.$router.resolve({
name: 'home',
});
window.open(routeData.href, '_blank');
}
到此這篇關(guān)于vue-router跳轉(zhuǎn)方式的區(qū)別的文章就介紹到這了,更多相關(guān)vue-router跳轉(zhuǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端處理axios請(qǐng)求下載后端返回的文件流代碼實(shí)例
使用axios可以很方便地獲取后端返回的文件流數(shù)據(jù),并在前端直接在瀏覽器下載,這篇文章主要給大家介紹了關(guān)于前端處理axios請(qǐng)求下載后端返回的文件流的相關(guān)資料,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下2023-12-12
這篇文章主要介紹了vue打包上傳到服務(wù)器加載慢的優(yōu)化方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
elementplus el-table(行列互換)轉(zhuǎn)置的兩種方法
本文主要介紹了elementplus el-table(行列互換)轉(zhuǎn)置,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的方法匯總
這篇文章主要介紹了Vue?項(xiàng)目運(yùn)行完成后自動(dòng)打開(kāi)瀏覽器的多種實(shí)現(xiàn)方法，方法一比較適用于vue3，每種方法通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2022-02-02
Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下2017-05-05
vue如何實(shí)現(xiàn)未登錄不能訪(fǎng)問(wèn)某些頁(yè)面
這篇文章主要介紹了vue如何實(shí)現(xiàn)未登錄不能訪(fǎng)問(wèn)某些頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue響應(yīng)式原理與雙向數(shù)據(jù)的深入解析
Vue 最獨(dú)特的特性之一,是其非侵入性的響應(yīng)式系統(tǒng)。下面這篇文章主要給大家介紹了關(guān)于vue響應(yīng)式原理與雙向數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)
在本篇文章里小編給大家分享的是一篇關(guān)于vue中插件和組件的區(qū)別點(diǎn)及用法總結(jié)內(nèi)容，有興趣的的朋友們可以學(xué)習(xí)下。2021-12-12
這篇文章主要介紹了基于element-UI input等組件寬度修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03