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