vue中获取上一页的路由信息

这两天做项目的时候，碰到产品提的一个需求，每次进到首页都要刷新，但是需要根据上一页路由的path的地址对首页里的内容进行不同的操作。

实现方式并不复杂，主要是利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息，然后给 next 传递回调来访问当前组件的实例，至于为什么不直接利用 this 访问组件实例，是因为beforeRouteEnter 守卫不能访问 this（beforeRouteEnter 守卫在导航确认前被调用，因此即将登场的新组件还没被创建）。

核心代码：

data(){
return {
fromPath:''
}
},
beforeRouteEnter (to, from, next){
next(vm => {
// 通过 `vm` 访问组件实例,将值传入fromPath
vm.fromPath = from.path
})
},
mounted(){
this.$nextTick(()=>{
// 验证是否获取到了上页的url
/* eslint-disable no-console */
console.log(this.fromPath)
})
}

本人前端程序员，长期混迹于各种前端开发中，现在专门为前端热爱者建了个微信群，和大家一起分享自己在工作、学习中遇到的技术知识或问题，还有各种资料和课程，各位感兴趣的可以加入哦~

vue中获取上一页的路由信息相关推荐

php中获取上一页的url地址
比较有用的 <?php $urlshang = $_SERVER['HTTP_REFERER']; //可以得到上一页的地址 $urldan = $_SERVER['PHP_SELF']; // ...
微信小程序获取上一页路由获取从哪个页面跳转进来的
微信小程序获取上一页路由获取从哪个页面跳转进来的 var pages = getCurrentPages(); let prevpage = pages[pages.length - 2];//上一 ...
vue中获取后一页面，前一页面的url
业务需求,从指定页面进入当前页,保留之前的输入内容 beforeRouteEnter()钩子函数,具体用法可参考vue官方文档 :注钩子函数内访问不到vue的this beforeRouteEnte ...
vue 给标签添加data属性_在Vue中获取自定义属性方法:data-id的实例
获取自定义属性的方法: 第一步:首先在标签上绑定上@click="getDateId(item.id)",并将属性值传到绑定的事件里面第二步:在标签上继续绑定:date-id = ...
javascript 获取上一页的url
在js中,如果通过连接或者表单提交里,可以用以下三种方式获取上一页的url: 1.document.referrer 2.top.document.referrer 3.window.parent.d ...
在vue中获取input上传图片的宽和高
在vue中获取input上传图片的宽和高上代码思路项目中有一个需求是需要上传190px*192px的png图片,一般直接在files.input[0]里面是找不到的,所以要变个思路了. 上代码 ...
vue中图片上传及回显
在vue中图片上传到服务器下指定路径,并实现根据图片路径调取后台接口返回图片流在vue页面展示图片一.图片上传 1.前台上传 <template slot-scope="scope& ...
ASP.NET 获取上一个页面的Url链接
ASP.NET 获取上一个页面的Url链接Uri Url = HttpContext.Current.Request.UrlReferrer;
在vue中获取微信支付code及code被占用问题的解决？
在vue中获取微信支付code及code被占用问题的解决? 参考文章: (1)在vue中获取微信支付code及code被占用问题的解决? (2)https://www.cnblogs.com/pana ...

vue中获取上一页的路由信息

vue中获取上一页的路由信息相关推荐

最新文章

热门文章