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+Java实现评论回复功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家介绍了vue之mixin的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
下面小编就为大家分享一篇vue进行图片的预加载watch用法实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vue 2.0+Vue-router构建一个简单的单页应用（附源码）
这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用，文中通过实例介绍的非常详细，并在文末给出了源码下载，需要的朋友可以下载学习参考，下面来一起看看吧。2017-03-03
Vue Tour 是一个方便的 Vue.js 插件,它可以帮助我们在网站或应用中实现简单而灵活的页面导览功能,本文我们将介绍如何在 Vue 3 中使用 Vue Tour,并通过示例代码演示其基本用法,需要的朋友可以参考下2024-04-04
这篇文章主要为大家介绍了Hooks对于Vue作用意义详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-06-06
下面小编就为大家分享一篇vue-prop父组件向子组件进行传值的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
如何解决this.$refs.form.validate()不执行的问题
这篇文章主要介绍了如何解决this.$refs.form.validate()不执行的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-09-09
这篇文章主要介绍了webstrom Debug 调试vue项目的方法步骤，详细的介绍了两种调试vue项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
这篇文章主要介绍了在vue中对数组值变化的监听与重新响应渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
最新评论