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修改数据页面无效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue build错误异常的解决方法 ，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
今天小编就为大家分享一篇Vue动态获取width的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
在平常的项目中,echarts图表我们也是使用的非常多的,通常我们从后端拿到数据,需要在图表上动态的进行呈现,接下来我们就模拟从后端获取数据然后进行呈现的方法2022-09-09
手把手教大家搭建安装基于windows的Vue.js的运行环境，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
这篇文章主要介绍了vue实现路由跳转动态title标题信息，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要介绍了vue watch immediate方法用法详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vuejs动态组件给子组件传递数据的方法详解的相关资料,需要的朋友可以参考下2016-09-09
Form组件提供了表单验证的功能,只需要通过属性传入约定的验证规则,并将Form-Item的属性设置为需校验的字段名即可,下面这篇文章主要给大家介绍了关于Element中el-form表单的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue打包的时候自动将px转成rem的操作方法,需要的朋友可以参考下2018-06-06
最新评论