vue组建内部导航守卫 查询上个路由页面地址 并赋值到本页面 监听用户未保存修改前突然离开

导航守卫事件：

首先大家都知道，官方文档所说：你可以在路由组件内直接定义以下路由导航守卫！于是我们在目标页面可以增加3个路由监听函数；
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to)
    console.log(from)   
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

获取上个路由地址并赋值

根据官方所说在beforeRouteEnter 事件中是不能调用this的，因为此时组件实例还没被创建，可以用vm来代替；如下

data(){
	return{
		fromPath: ''
	}
}
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 通过 `vm` 访问组件实例
    // 因为当守卫执行前，组件实例还没被创建
    console.log(to)
    console.log(from)
    next((vm)=>{
    	vm.fromPath = from.path
    })
  },

然而此时你在mounted中并不能打印到 this.fromPath赋值后的结果，找了很多文章都说在mounted中调用this. $nextTick()，官方说明this.$nextTick()是将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

BUT！！！

mounted中调用this.$nextTick()打印的结果表明无法获取赋值后的结果。因为beforeRouteEnter 中 next() 执行时机在组件mounted周期之后！！！！
于是我想到了watch来监听于是得到了我想要的结果

watch(){
	fromPath(newVal){
		console.log("this.fromPath==="+this.newVal)
	}
}

此时，无论在mounted还是method中即可使用this.fromPath。

监听用户未保存修改前突然离开

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('还有未保存的内容，确定要离开嘛？')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

楼主也在不断学习中，如有写的不对的地方，欢迎大佬指导沟通！