vue路由跳轉(zhuǎn)到新頁(yè)面實(shí)現(xiàn)置頂
更新時(shí)間：2023年05月25日 09:46:29 作者：qq_43103581
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁(yè)面實(shí)現(xiàn)置頂問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue路由跳轉(zhuǎn)到新頁(yè)面置頂
當(dāng)頁(yè)面較長(zhǎng)，有滾動(dòng)條時(shí)，路由跳轉(zhuǎn)的時(shí)候，有時(shí)會(huì)有不能置頂?shù)那闆r，只需要在router.js中加入以下代碼即可（不是唯一，但能解決問(wèn)題）
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
vue路由跳轉(zhuǎn)的幾種方式及解釋說(shuō)明
router-link（聲明式路由，在頁(yè)面中調(diào)用）
在Vue中，router-link稱為聲明式路由，常放在頁(yè)面中，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，通過(guò)點(diǎn)擊實(shí)現(xiàn)跳轉(zhuǎn)，路由的跳轉(zhuǎn)主要有兩種形式，一種是通過(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ù)組引用類型數(shù)據(jù)，只能傳字符串類型數(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' } });
? }? <a-button type="primary" @click="goTo">路由path方式跳轉(zhuǎn)</a-button>
? goTo() {
? ? this.$router.push({ path: '/home', params: { a: '1', b: '2' } });//推薦用params傳參方式
? ? this.$router.push({ path: '/home', query: { a: '1', b: '2' } });
? }this.$router.resolve()打開新窗口跳轉(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');
? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- vue 倒計(jì)時(shí)結(jié)束跳轉(zhuǎn)頁(yè)面實(shí)現(xiàn)代碼
- vue如何跳轉(zhuǎn)到其他頁(yè)面
- vue跳轉(zhuǎn)頁(yè)面的幾種常用方法代碼示例
- vue 跳轉(zhuǎn)到其他頁(yè)面并關(guān)閉當(dāng)前頁(yè)面的實(shí)現(xiàn)代碼
- vue實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)和參數(shù)傳遞的兩種方式
- Vue路由跳轉(zhuǎn)傳參或打開新頁(yè)面跳轉(zhuǎn)的方法總結(jié)
- vue實(shí)現(xiàn)三級(jí)頁(yè)面跳轉(zhuǎn)功能
- vue3頁(yè)面跳轉(zhuǎn)的兩種方式
- vue3 setup點(diǎn)擊跳轉(zhuǎn)頁(yè)面的實(shí)現(xiàn)示例
相關(guān)文章
Vuex中如何getters動(dòng)態(tài)獲取state的值
這篇文章主要介紹了Vuex中如何getters動(dòng)態(tài)獲取state的值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
.native主要是給自定義的組件添加原生事件，可以理解為該修飾符的作用就是把一個(gè)vue組件轉(zhuǎn)化為一個(gè)普通的HTML標(biāo)簽，并且該修飾符對(duì)普通HTML標(biāo)簽是沒有任何作用的，這篇文章主要介紹了vue?事件中的?.native你搞清楚了嗎,需要的朋友可以參考下2023-02-02
Vue中計(jì)算屬性和監(jiān)聽屬性及數(shù)據(jù)的響應(yīng)式更新和依賴收集基本原理講解
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2023-03-03
vue項(xiàng)目本地開發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開發(fā)使用Nginx配置代理后端接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄
通常我們?cè)趘ue項(xiàng)目中都是前端配置好路由的,但在一些項(xiàng)目中我們可能會(huì)遇到權(quán)限控制,這樣我們就涉及到動(dòng)態(tài)路由的設(shè)置了,下面這篇文章主要給大家介紹了關(guān)于如何利用Vue3管理系統(tǒng)實(shí)現(xiàn)動(dòng)態(tài)路由和動(dòng)態(tài)側(cè)邊菜單欄的相關(guān)資料,需要的朋友可以參考下2022-02-02
Vue使用VueUse實(shí)現(xiàn)開發(fā)效率提升指南
VueUse/Core?是一個(gè)基于?Composition?API?的Vue實(shí)用函數(shù)集合,它提供了一系列可復(fù)用的組合式函數(shù),涵蓋了常見的開發(fā)需求,下面小編來(lái)和大家講講它的具體應(yīng)用吧2025-05-05
vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參
這篇文章主要介紹了vue post application/x-www-form-urlencoded如何實(shí)現(xiàn)傳參問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定
這篇文章主要介紹了詳解Vue.js基于$.ajax獲取數(shù)據(jù)并與組件的data綁定，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式
這篇文章主要介紹了vue使用moment如何將時(shí)間戳轉(zhuǎn)為標(biāo)準(zhǔn)日期時(shí)間格式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3項(xiàng)目typescript如何export引入(imported)的interface問(wèn)題
這篇文章主要介紹了vue3項(xiàng)目typescript如何export引入(imported)的interface問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06