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 類(lèi)似，但它不會(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父組件監(jiān)聽(tīng)子組件生命周期,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
Vue Components 數(shù)字鍵盤(pán)的實(shí)現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤(pán)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本篇文章主要介紹了詳解vue 模版組件的三種用法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線(xiàn)圖
這篇文章主要為大家詳細(xì)介紹了Vue+Echarts實(shí)現(xiàn)簡(jiǎn)單折線(xiàn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的方法代碼
這篇文章主要給大家介紹了關(guān)于Vue3+Vite項(xiàng)目中引入pinia和pinia-plugin-persistedstate的相關(guān)資料,Pinia是Vue.js的官方狀態(tài)管理庫(kù),輕量且功能強(qiáng)大,支持模塊化和TypeScript,PiniaPluginPersistedState是一個(gè)插件,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue函數(shù)@click.prevent的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法
本篇文章主要介紹了Vue + Vue-router 同名路由切換數(shù)據(jù)不更新的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
下面小編就為大家分享一篇vue二級(jí)路由設(shè)置方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue2.x+webpack快速搭建前端項(xiàng)目框架詳解
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項(xiàng)目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單登錄界面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06