监听路由变化的方法

1.watch

需要注意的是，只能监听到子路由的改变。

• Person.vue

<template>
  <div id="person">
    <h1 @click="toMain">个人中心</h1>
    <p>这里是个人中心，欢迎访问个人相关信息</p>
    <router-link to="/person/user">用户信息</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'Person',
  data () {
    return { }
  },
  watch: {
    $route(to, from) {
      //这里可以加你监听到路由改变时要触发的方法
      console.log(to.path)
      console.log(from.path)
    }
  },
  methods: {
    toMain() {
      this.$router.go(-1)
    }
  }
}
</script>
<style>
  #person {
    color: greenyellow;
  }
  #person p {
    background: pink;
  }
</style>

-router.js

import Vue from 'vue'
import Router from 'vue-router'
import App from '../App.vue'
import Main from '../components/Main.vue'
import Person from '../components/Person.vue'
import User from '../components/User.vue'

Vue.use(Router)

export default new Router({
    routes: [
      {
        path: '/',
        name: 'App',
        component: App,
        children: [{
            path: 'main',
            name: 'Main',
            component: Main
        }]
      },
      {
        path: '/person/',
        name: 'Person',
        component: Person,
        children: [
          {
            path: 'user',
            name: 'User',
            component: User
          }
        ]
      }
    ]
  })

2.使用路由钩子函数 beforeRouteEnter beforeRouteUpdate beforeRouteLeave

钩子函数beforeRouteEnter，beforeRouteLeave 可以监听本身路由的改变的
beforeRouteUpdate则是监听子路由的变化的
钩子函数的缺点是没发操作获取 `this`

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

大家一起进步，文章有啥疑问可以问，尽量回答。若发现什么问题也麻烦大牛们指出，谢谢。

csdn链接