Vue-router跳轉(zhuǎn)和location.href的區(qū)別及說明
更新時間：2025年01月17日 11:01:31 作者：Cshaosun
Vue?Router是Vue.js官方的路由管理器,它允許我們通過定義路由來管理應(yīng)用程序的不同視圖和狀態(tài),Vue路由跳轉(zhuǎn)主要有以下幾種方式：<router-link>標(biāo)簽、this.$router.push方法、this.$router.replace方法和this.$router.go方法
Vue-router跳轉(zhuǎn)和location.href區(qū)別
使用 location.href= /url 來跳轉(zhuǎn)， 簡單方便， 但是刷新了頁面
使用 history.pushState( /url ) ， 無刷新頁面， 靜態(tài)跳轉(zhuǎn)；引進(jìn) router ， 然后使用 router.push( /url ) 來跳轉(zhuǎn)， 使用了 diff算法， 實現(xiàn)了按需加載， 減少了 dom 的消耗。
注：
- 使用 router 跳轉(zhuǎn)和使用 history.pushState() 沒什么差別的
- 因為 vue-router 就是用了 history.pushState()
- 尤其是在 history 模式下
Vue 路由跳轉(zhuǎn)
Vue Router 是 Vue.js 官方的路由管理器，它允許我們通過定義路由來管理應(yīng)用程序的不同視圖和狀態(tài)。
Vue 路由跳轉(zhuǎn)主要有以下幾種方式
1.<router-link> 標(biāo)簽
<router-link to="/about">Go to About</router-link>
2.this.$router.push 方法
this.$router.push('/about');
// 跳轉(zhuǎn):
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 添加新記錄，而是替換當(dāng)前的 history 記錄。
this.$router.replace('/about');4.this.$router.go 方法
this.$router.go 方法用于在 history 記錄中前進(jìn)或后退。
this.$router.go(-1); // 后退一頁 this.$router.go(1); // 前進(jìn)一頁
location.href
相較于Vue Router，location.href= /url會重新加載整個頁面，性能相對較低并且沒有返回記錄
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue父組件監(jiān)聽子組件生命周期,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
Vue Components 數(shù)字鍵盤的實現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實現(xiàn)簡單折線圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+Vite項目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫,輕量且功能強大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個插件,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue函數(shù)@click.prevent的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法
本篇文章主要介紹了Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
下面小編就為大家分享一篇vue二級路由設(shè)置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06