vue路由跳轉(zhuǎn)到新頁面實現(xiàn)置頂
更新時間：2023年05月25日 09:46:29 作者：qq_43103581
這篇文章主要介紹了vue路由跳轉(zhuǎn)到新頁面實現(xiàn)置頂問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue路由跳轉(zhuǎn)到新頁面置頂
當頁面較長，有滾動條時，路由跳轉(zhuǎn)的時候，有時會有不能置頂?shù)那闆r，只需要在router.js中加入以下代碼即可（不是唯一，但能解決問題）
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
},
vue路由跳轉(zhuǎn)的幾種方式及解釋說明
router-link（聲明式路由，在頁面中調(diào)用）
在Vue中，router-link稱為聲明式路由，常放在頁面中，:to綁定為跳轉(zhuǎn)的目標地址，通過點擊實現(xiàn)跳轉(zhuǎn)，路由的跳轉(zhuǎn)主要有兩種形式，一種是通過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ù)不會顯示在跳轉(zhuǎn)的URL中，query傳參的參數(shù)會顯示在URL中。
- 2. params所傳的參數(shù)通過this.$route.params.參數(shù)；獲取，query所傳的參數(shù)通過this.$route.query.參數(shù)；獲取
- 3. 因為params所傳遞的參數(shù)不顯示在URl中，所以在路由跳轉(zhuǎn)時推薦params方式進行傳參
- 4. 都不能傳對象和著數(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' } });
? }? <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通過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');
? }總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了vue的watch和watchEffect，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家詳細介紹了Vue實現(xiàn)點擊顯示不同圖片的效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
關(guān)于element?ui?表格中的常見特殊屬性說明
這篇文章主要介紹了關(guān)于element?ui?表格中的常見特殊屬性說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于Vue3和Element Plus實現(xiàn)可擴展的表格組件
在開發(fā)過程中,我們經(jīng)常需要創(chuàng)建具有復雜功能的表格組件,本文將介紹如何使用 Vue 3 和 Element Plus 庫來構(gòu)建一個可擴展的表格組件,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-07-07
vue-router history模式下的微信分享小結(jié)
本篇文章主要介紹了vue-router history模式下的微信分享小結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了Vue項目中添加鎖屏功能的實現(xiàn)思路，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2018-06-06
這篇文章主要給大家介紹了關(guān)于Vue3安裝dataV報錯問題解決方案的相關(guān)資料,dataV用于大屏展示,個人覺得比echarts簡單很多,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了使用vue實現(xiàn)一個電子簽名組件的示例代碼,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼
本文主要介紹了Vue+ElementUI實現(xiàn)從后臺動態(tài)填充下拉框的示例代碼，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue?Router路由hash模式與history模式詳細介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁面應(yīng)用變得易如反掌。路由實際上就是可以理解為指向，就是我在頁面上點擊一個按鈕需要跳轉(zhuǎn)到對應(yīng)的頁面，這就是路由跳轉(zhuǎn)2022-08-08