vue中路由的前进和后退问题
作者：坚书直实i
这篇文章主要介绍了vue中路由的前进和后退问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue路由的前进和后退
this.$router.back() // 返回上一级
this.$router.go(-1) // 也是返回上一级 1就是前进 -1往后回退一级 -2 是往后回退二级
this.$router.push("aa") // 路由前进 aa是路由code浏览器的刷新和回退
location.reload(参数) // true 是强制刷新相当于Ctrl+F5 false 刷新相当于F5 location.href = "" // 相当于浏览器地址栏的地址，也可以实现页面跳转 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" >关于</a>
<!-- router-view -->
<div id="view"></div>
</body><script>
// 路由原码是怎么实现的
// hash模式下
// 监听浏览器的hashchange方法，对应拿到路径，渲染对应组件；
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;
})两个的区别：
1.hash通过锚点跳转，# url会更改，浏览器可以进行前进后退，浏览器不断刷新，不和服务器端交流（主要通过hash）
2.history无锚点无hash，需要服务端配合
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。