vue中路由的前進(jìn)和后退問題
更新時(shí)間：2023年10月24日 17:13:28 作者：堅(jiān)書直實(shí)i
這篇文章主要介紹了vue中路由的前進(jìn)和后退問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue路由的前進(jìn)和后退
this.$router.back() // 返回上一級(jí)
this.$router.go(-1) // 也是返回上一級(jí) 1就是前進(jìn) -1往后回退一級(jí) -2 是往后回退二級(jí)
this.$router.push("aa") // 路由前進(jìn) aa是路由code瀏覽器的刷新和回退
location.reload(參數(shù)) // true 是強(qiáng)制刷新相當(dāng)于Ctrl+F5 false 刷新相當(dāng)于F5 location.href = "" // 相當(dāng)于瀏覽器地址欄的地址，也可以實(shí)現(xiàn)頁面跳轉(zhuǎn) history.back() // 后退 history.go(-1) // 后退 history.go(1) // 前進(jìn) history.forward() // 前進(jìn) history.go(0) // 刷新 location.reload() // 刷新
vue中路由原理
hash模式下
<body>
<!-- router-link -->
<a href="#/" rel="external nofollow" >首頁</a>
<a href="#about" rel="external nofollow" >關(guān)于</a>
<!-- router-view -->
<div id="view"></div>
</body><script>
// 路由原碼是怎么實(shí)現(xiàn)的
// hash模式下
// 監(jiān)聽瀏覽器的hashchange方法，對(duì)應(yīng)拿到路徑，渲染對(duì)應(yīng)組件；
document.addEventListener('DOMContentLoaded',()=>{
view.innerHTML = location.hash.slice(1);
})
window.addEventListener('hashchange',() => {
console.log('hashchange');
view.innerHTML = location.hash.slice(1);
})history模式下
// history模式下
// 如果不用a標(biāo)簽 用span元素則
// h5中的pushState
function routerChange(pathname){
history.pushState(null,null,pathname)
view.innerHTML = location.pathname;
}
window.addEventListener('popstate',()=>{
view.innerHTML = location.pathname;
})兩個(gè)的區(qū)別：
1.hash通過錨點(diǎn)跳轉(zhuǎn)，# url會(huì)更改，瀏覽器可以進(jìn)行前進(jìn)后退，瀏覽器不斷刷新，不和服務(wù)器端交流（主要通過hash）
2.history無錨點(diǎn)無hash，需要服務(wù)端配合
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于vue的ssr服務(wù)端渲染的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
Vue3新屬性之css中使用v-bind的方法（v-bind?in?css）
這篇文章主要介紹了Vue3新屬性css中使用v-bind（v-bind?in?css）的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-01-01
vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié)
這篇文章主要介紹了vue+element項(xiàng)目中過濾輸入框特殊字符小結(jié)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例
今天小編就為大家分享一篇關(guān)于vue.js的vue-cli腳手架中使用百度地圖API的實(shí)例，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue+Element實(shí)現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue2實(shí)現(xiàn)無感刷新token的方式詳解
在Web應(yīng)用中,用戶需要通過認(rèn)證和授權(quán)才能訪問受保護(hù)的資源,為了實(shí)現(xiàn)認(rèn)證和授權(quán)功能,通常需要使用Token來標(biāo)識(shí)用戶身份并驗(yàn)證其權(quán)限,本文給大家介紹了vue2實(shí)現(xiàn)無感刷新token的方式,需要的朋友可以參考下2024-02-02
Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問題處理方法
相信大家都知道在element-ui中,el-upload可以進(jìn)行文件多選操作,下面這篇文章主要給大家介紹了關(guān)于Vue使用el-upload批量上傳圖片時(shí)報(bào)錯(cuò)問題的處理方法,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
本篇文章主要介紹了vue Render中slots的使用的實(shí)例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07
這篇文章主要介紹了vue element-ui讀取pdf文件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了如何理解Vue的v-model指令的使用方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07