Vue-router跳轉和location.href的區(qū)別及說明
更新時間：2025年01月17日 11:01:31 作者：Cshaosun
Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應用程序的不同視圖和狀態(tài),Vue路由跳轉主要有以下幾種方式：<router-link>標簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法
Vue-router跳轉和location.href區(qū)別
使用 location.href= /url 來跳轉， 簡單方便， 但是刷新了頁面
使用 history.pushState( /url ) ， 無刷新頁面， 靜態(tài)跳轉；引進 router ， 然后使用 router.push( /url ) 來跳轉， 使用了 diff算法， 實現(xiàn)了按需加載， 減少了 dom 的消耗。
注：
- 使用 router 跳轉和使用 history.pushState() 沒什么差別的
- 因為 vue-router 就是用了 history.pushState()
- 尤其是在 history 模式下
Vue 路由跳轉
Vue Router 是 Vue.js 官方的路由管理器，它允許我們通過定義路由來管理應用程序的不同視圖和狀態(tài)。
Vue 路由跳轉主要有以下幾種方式
1.<router-link> 標簽
<router-link to="/about">Go to About</router-link>
2.this.$router.push 方法
this.$router.push('/about');
// 跳轉:
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// 獲取參數(shù)html職參
$route.query.id
//script取參
this.$route.query.id3.this.$router.replace 方法
this.$router.replace 方法與 this.$router.push 類似，但它不會向 history 添加新記錄，而是替換當前的 history 記錄。
this.$router.replace('/about');4.this.$router.go 方法
this.$router.go 方法用于在 history 記錄中前進或后退。
this.$router.go(-1); // 后退一頁 this.$router.go(1); // 前進一頁
location.href
相較于Vue Router，location.href= /url會重新加載整個頁面，性能相對較低并且沒有返回記錄
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue-openlayers實現(xiàn)地圖坐標彈框效果
這篇文章主要為大家詳細介紹了vue-openlayers實現(xiàn)地圖坐標彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
vscode配置vue下的es6規(guī)范自動格式化詳解
這篇文章主要介紹了vscode配置vue下的es6規(guī)范自動格式化詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue3中如何使用dayjs問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue 刷新當前路由的實現(xiàn)代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實例
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結合實例形式分析了vue基于axios庫post傳送表單json格式數(shù)據(jù)相關操作實現(xiàn)技巧與注意事項,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關于Vue3中reactive丟失響應式的問題解決,vue3中reactive定義的引用類型直接賦值導致數(shù)據(jù)失去響應式 ,需要的朋友可以參考下2023-07-07
Vue.js是目前很火的一個前端框架，采用MVVM模式設計，它是以數(shù)據(jù)驅動和組件化的思想構建的。本文重點給大家介紹Vuejs開發(fā)環(huán)境搭建及熱更新的相關知識，需要的朋友參考下吧2018-09-09
vue實現(xiàn)列表滑動下拉加載數(shù)據(jù)的方法
文章介紹了如何使用Vue實現(xiàn)列表滑動下拉加載數(shù)據(jù)的功能,通過監(jiān)聽滾動事件,檢測用戶是否滾動到底部,然后動態(tài)加載更多數(shù)據(jù),附帶了實現(xiàn)思路和案例代碼,感興趣的朋友一起看看吧2024-11-11
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應式更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解vue-cli 3.0 build包太大導致首屏過長的解決方案
這篇文章主要介紹了詳解vue-cli 3.0 build包太大導致首屏過長的解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11