vue-router跳轉(zhuǎn)方式的區(qū)別解析
一、router-link（聲明式路由，在頁面中調(diào)用）
在Vue中，router-link稱為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過name，另一種是path。
1.1 路由不帶參數(shù)
<router-link :to="{ name: 'word' }">路由name方式跳轉(zhuǎn)首頁</router-link>
<router-link :to="{ path: '/word' }">路由path方式跳轉(zhuǎn)首頁</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ù)通過this.$route.params.參數(shù)；獲取，query所傳的參數(shù)通過this.$route.query.參數(shù) 獲取
3. 因?yàn)閜arams所傳遞的參數(shù)不顯示在URl中，所以在路由跳轉(zhuǎn)時(shí)推薦params方式進(jìn)行傳參
4. 都不能傳對(duì)象和數(shù)組引用類型數(shù)據(jù)，只能傳字符串類型數(shù)據(jù)
<router-link :to="{ name: 'home', params: { key: '1', value: '跳轉(zhuǎn)' } }">路由name,params方式跳轉(zhuǎn)首頁</router-link>
<router-link :to="{ name: 'home', query: { key: '1', value: '跳轉(zhuǎn)' } }">路由name,query方式跳轉(zhuǎn)首頁</router-link>
<router-link :to="{ path: '/home', params: { key: '1', value: '跳轉(zhuǎn)' } }">路由path,params方式跳轉(zhuǎn)首頁</router-link>
<router-link :to="{ path: '/home', query: { key: '1', value: '跳轉(zhuǎn)' } }">路由path,query方式跳轉(zhuǎn)首頁</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()打開新窗口跳轉(zhuǎn)
3.1通過path形式跳轉(zhuǎn)
goTo() {
let routeData = this.$router.resolve({
path: '/home',
});
window.open(routeData.href, '_blank');
}
3.2通過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)文章
vue中將el-switch值true、false改為number類型的1和0
這篇文章主要介紹了vue中將el-switch值true、false改為number類型的1和0問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何利用Vue3實(shí)現(xiàn)九宮格抽獎(jiǎng)的功能，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，感興趣的可以了解一下2022-09-09
例如組件使用頻率非常高,幾乎每個(gè)頁面都在使用便可以封裝成全局組件,下面通過本文給大家介紹Vue3注冊(cè)全局組件的相關(guān)知識(shí),感興趣的朋友一起看看吧2024-01-01
vue?element?ui表格相同數(shù)據(jù)合并單元格效果實(shí)例
工作中遇到需要根據(jù)單元格某個(gè)屬性合并,特此記錄下,下面這篇文章主要給大家介紹了關(guān)于vue?element?ui表格相同數(shù)據(jù)合并單元格效果的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例
這篇文章主要介紹了VeeValidate在vue項(xiàng)目里表單校驗(yàn)應(yīng)用案例，VeeValidate是Vue.js的驗(yàn)證庫，它有很多驗(yàn)證規(guī)則，并支持自定義規(guī)則，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-05-05
vue打包并部署到nginx上的實(shí)現(xiàn)示例
本文主要介紹了vue打包并部署到nginx上的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
vue使用stompjs實(shí)現(xiàn)mqtt消息推送通知
這篇文章主要為大家詳細(xì)介紹了vue中使用stompjs實(shí)現(xiàn)mqtt消息推送通知，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
vue-router中hash模式與history模式的區(qū)別
為了構(gòu)建 SPA（單頁面應(yīng)用）,需要引入前端路由系統(tǒng),這就是 Vue-Router 存在的意義,而這篇文章主要給大家介紹了關(guān)于vue-router中兩種模式區(qū)別的相關(guān)資料，分別是hash模式、history模式,需要的朋友可以參考下2021-06-06
vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法
這篇文章主要介紹了vue.js iview打包上線后字體圖標(biāo)不顯示解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析
這篇文章主要介紹了Vue組件通信$attrs、$listeners實(shí)現(xiàn)原理解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09