需求

在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 这个钩子里实现。