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(参数) // 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，需要服务端配合
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本篇文章主要介绍了VUE axios发送跨域请求需要注意的问题，在实际项目中前端使用到vue，后端使用php进行开发。前端使用axios请求请求遇到的问题，有兴趣的可以了解一下2017-07-07
本文介绍了基于Vue和iView的文件分片上传技术,通过将文件拆分成多个小块并逐块上传,解决了大文件上传时的诸多问题,如上传速度慢、超时和网络中断等,它还展示了如何实现分片上传的进度显示、错误处理和断点续传等功能,感兴趣的朋友跟随小编一起看看吧2025-01-01
Vue动态路由(约定路由),听起来好像很玄乎的样子,但是你要是理解了实现思路,你会发现没有想象中的那么难,下面这篇文章主要给大家介绍了关于vue实现动态路由添加功能的简单方法,需要的朋友可以参考下2023-03-03
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
这篇文章主要介绍了解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题2020-08-08
vue中this.$refs.name.offsetHeight获取不到值问题
这篇文章主要介绍了vue中this.$refs.name.offsetHeight获取不到值问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本篇文章主要介绍了vue2.x 父组件监听子组件事件并传回信息的方法，具有一定的参考价值，有兴趣的可以了解一下2017-07-07
这篇文章主要介绍了Vue父子组件传值的三种方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了Mock.js在Vue项目中的使用,在vue.config.js中配置devServer，在before属性中引入接口路由函数，详细步骤跟随小编通过本文学习吧2022-07-07
本篇文章主要介绍了VUE axios上传图片到七牛的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
解决vue-cli webpack打包开启Gzip 报错问题
这篇文章主要介绍了vue-cli webpack打包开启Gzip 报错问题的解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-07-07
最新评论