vue中路由的前進和后退問題
更新時間：2023年10月24日 17:13:28 作者：堅書直實i
這篇文章主要介紹了vue中路由的前進和后退問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue路由的前進和后退
this.$router.back() // 返回上一級
this.$router.go(-1) // 也是返回上一級 1就是前進 -1往后回退一級 -2 是往后回退二級
this.$router.push("aa") // 路由前進 aa是路由code瀏覽器的刷新和回退
location.reload(參數(shù)) // true 是強制刷新相當于Ctrl+F5 false 刷新相當于F5 location.href = "" // 相當于瀏覽器地址欄的地址，也可以實現(xiàn)頁面跳轉(zhuǎn) history.back() // 后退 history.go(-1) // 后退 history.go(1) // 前進 history.forward() // 前進 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>
// 路由原碼是怎么實現(xiàn)的
// hash模式下
// 監(jiān)聽瀏覽器的hashchange方法，對應(yīng)拿到路徑，渲染對應(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標簽 用span元素則
// h5中的pushState
function routerChange(pathname){
history.pushState(null,null,pathname)
view.innerHTML = location.pathname;
}
window.addEventListener('popstate',()=>{
view.innerHTML = location.pathname;
})兩個的區(qū)別：
1.hash通過錨點跳轉(zhuǎn)，# url會更改，瀏覽器可以進行前進后退，瀏覽器不斷刷新，不和服務(wù)器端交流（主要通過hash）
2.history無錨點無hash，需要服務(wù)端配合
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了VUE axios發(fā)送跨域請求需要注意的問題，在實際項目中前端使用到vue，后端使用php進行開發(fā)。前端使用axios請求請求遇到的問題，有興趣的可以了解一下2017-07-07
基于Vue 和 iView分片上傳功能實現(xiàn)(上傳組件)
本文介紹了基于Vue和iView的文件分片上傳技術(shù),通過將文件拆分成多個小塊并逐塊上傳,解決了大文件上傳時的諸多問題,如上傳速度慢、超時和網(wǎng)絡(luò)中斷等,它還展示了如何實現(xiàn)分片上傳的進度顯示、錯誤處理和斷點續(xù)傳等功能,感興趣的朋友跟隨小編一起看看吧2025-01-01
Vue動態(tài)路由(約定路由),聽起來好像很玄乎的樣子,但是你要是理解了實現(xiàn)思路,你會發(fā)現(xiàn)沒有想象中的那么難,下面這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)動態(tài)路由添加功能的簡單方法,需要的朋友可以參考下2023-03-03
解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題
這篇文章主要介紹了解決VUE項目localhost端口服務(wù)器拒絕連接,只能用127.0.0.1的問題2020-08-08
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法
本篇文章主要介紹了vue2.x 父組件監(jiān)聽子組件事件并傳回信息的方法，具有一定的參考價值，有興趣的可以了解一下2017-07-07
這篇文章主要介紹了Vue父子組件傳值的三種方法，本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Mock.js在Vue項目中的使用,在vue.config.js中配置devServer，在before屬性中引入接口路由函數(shù)，詳細步驟跟隨小編通過本文學習吧2022-07-07
本篇文章主要介紹了VUE axios上傳圖片到七牛的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
解決vue-cli webpack打包開啟Gzip 報錯問題
這篇文章主要介紹了vue-cli webpack打包開啟Gzip 報錯問題的解決方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07