vue2如何获取上页的url地址
更新时间：2024年03月01日 09:58:06 作者：haishangfeie
这篇文章主要介绍了vue2如何获取上页的url地址问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue2获取上页的url地址
需求
在vue2的项目中有一个需求需要获取上一页路由的url的地址，在网上找了一会也没有找到合适的答案，最后还是在官方文档中找到了答案，因此将此方法记录下来，希望能给有需要的人提供一点帮助。
思路
思路其实很简单，就是利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息，然后给 next 传递回调来访问当前组件的实例。
也许有人会问了，为什么不直接利用 this 访问组件实例。
原因在官方文档中也有说明：
beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
具体代码
在想获取上页的组件内：
data(){
return {
oldUrl:''
}
},
beforeRouteEnter (to, from, next){
next(vm => {
// 通过 `vm` 访问组件实例,将值传入oldUrl
vm.oldUrl = from.path
})
},
mounted(){
this.$nextTick(()=>{
// 验证是否获取到了上页的url
/* eslint-disable no-console */
console.log(this.oldUrl)
})
}主要逻辑实现就在 beforeRouteEnter 这个钩子里实现。
vue中获取url路径
需要使用window.location.[options]
我们先弹出看一下window.location会显示什么？
alert(window.location);
/sys-user为当前vue的路径
options属性有如下
| 属性 | 描述 |
|---|---|
| hash | 从#号开始的RUL |
| host | 主机名和当前URL的端口 |
| hostname | 当前URL的主机名 |
| herf | 完整的URL |
| pathname | 当前URL的路径部分 |
| port | 当前URL的端口 |
| protocol | 当前URL协议 |
| search | 从问好（?)开始的URL（查询部分） |
alert(window.location.hash)
alert(window.location.host);
alert(window.location.hostname);
alert(window.location.href);
alert(window.location.pathname);
alert(window.location.port);
alert(window.location.protocol);
alert(window.location.search);
比如: http://localhost:8080/#/test?limitUserName=test&grade=0 像这种路径,取到的就是空值
因为查询字符串search只能在取到“？”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇Vue刷新修改页面中数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
vue实现ajax滚动下拉加载，同时具有loading效果(推荐)
这篇文章主要介绍了vue实现ajax滚动下拉加载，同时具有loading效果的实现代码，文章包括难点说明，介绍的非常详细，感兴趣的朋友参考下2017-01-01
这篇文章主要介绍了Vue3 中的ref与props属性知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2025-04-04
vue perfect-scrollbar(特定框架里使用非该框架定制库/插件)
这篇文章主要为大家介绍了vue perfect-scrollbar在特定框架里使用一款并非为该框架定制的库/插件如何实现，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>2023-05-05
这篇文章主要介绍了vue导入新工程 “node_modules依赖”问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
hls.js是一个用于在浏览器中播放HLS（HTTP Live Streaming）视频流的JavaScript库,这篇文章主要介绍了vue项目中使用hls.js播放m3u8视频踩过坑的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2025-07-07
map()函数定义在JS的array中,它返回一个新的数组,下面这篇文章主要给大家介绍了关于Vue中map()的用法案例,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-07-07
本文重点给大家介绍Vue拖拽组件开发实例，拖拽的原理是手指在移动的过程中，实时改变元素的位置即top和left值，使元素随着手指的移动而移动。对实例代码感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。这篇文章主要介绍了VUE 中添加手机验证码组件,需要的朋友可以参考下2017-12-12
这篇文章主要给大家介绍了关于实现Vue3版抖音滑动插件踩坑指南,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
最新评论