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