vue2如何获取上页的url地址
作者：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取值为空。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。