一.watch监听$route（$router的对象）
 
// 监听,当路由发生变化的时候执行
watch:{
  $route(to,from){
    console.log(to.path);
  }
},
===========================================================
// 监听,当路由发生变化的时候执行
watch: {
  $route: {
    handler: function(val, oldVal){
      console.log(val);
    },
    // 深度观察监听
    deep: true
  }
},
===========================================================
// 监听,当路由发生变化的时候执行
watch: {
  '$route':'getPath'
},
methods: {
  getPath(){
    console.log(this.$route.path);
  }
}
 
二. vue-router 的钩子函数(写在与methods同级的地方或者router中)
 
beforeRouteEnter (to, from, next) {
 // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 因为当钩子执行前，组件实例还没被创建
},
===========================================================
beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
===========================================================
beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
},
 
完整的导航解析流程
 
导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。
 
三. 路由守卫
 
import Vue from "vue";
import VueRouter from "vue-router";
import store from '@/store'
Vue.use(VueRouter);

const routes = [***]

const router = new VueRouter({
  routes
});


// 设置路由守卫，在进页面之前，判断有token，才进入页面，否则返回登录页面
router.beforeEach((to, from, next) => {
  // 判断要去的路由有没有 noRequireToken
  // to.matched.some(r => r.meta.noRequireToken) or to.meta.noRequireToken
  if (to.matched.some(r => !r.meta.noRequireToken)) {
    let token = store.getters.getToken
    console.log("token：", token,to.fullPath)
    if (token) {
      next(); //有token,进行request请求，后台还会验证token
    } else {
      next({
        name: "Login", // 使用params参数不会消失，meta刷新后消失；params必须和query一起用？
        // path:"/login",
        // 将刚刚要去的路由path（却无权限）作为参数，方便登录成功后直接跳转到该路由，这要进一步在登陆页面判断
        query: { redirect: to.fullPath },
        // params: { redirect: to.fullPath },
        // meta: { redirect: to.fullPath },
      });
    }
  } else {
    next(); //如果无需token,那么随它去吧
  }
});

export default router;

 
组件独享守卫
 
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
 
官网介绍 vue-router

 
 

   版权声明：本文首发 http://asing1elife.com ，转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82620124 
 
 
 
 
  
Vue 组件中监听路由变化
 
  
 
   
在 Vue 的组件中可以通过 watch 监听到当前路由的变化 
 
  
 
  
更多精彩
 
  
更多技术博客，请移步 asing1elife’s blog 
  
实现方式
 
  
在 watch 按照如下规则书写即可
该监听会在路由发生变化时触发
  
watch: {
    '$route' (val, old) {
        // 当前路由
        console.log(val)
        // 上一个路由
        console.log(old)
    }
}
 
 
 

Vue.js 官方文档中提供了 导航完成后获取数据 和 在导航完成前获取数据 两种方法，我个人使用的是前者，这个需要小伙伴们自己按照需求来定。文档地址
 
现在着重说一下 导航完成后获取数据 中的不同的写法：
 
第一种
 
watch: {
   $route:{
      handler(val, oldVal){
         let that = this;
         console.log(val,'监控路由变化');
         if(val.name === '你的router配置的name值'){
            //在这里做你要做的事
         }
      },
      deep:true //深度监听
   }
}
 
或者
 
watch: {
   '$route':'getPath'
},
methods: {
   getPath(){
       console.log(this.$route.path);
       //你的逻辑代码或数据请求
   }
},
 
以上的这两种写法 只是单纯的去监听你的 router 的变化 也就是你 router 配置的 path 的变化。
 
实用场景：A页面通过 router-link 跳转B页面，通过 to="{name:' ',params:{}}" 传递参数，在B页面拿到你所传过来的参数后，路由发生变化，监听捕获数据，然后执行你你逻辑代码。
 
内容提升及补充：Vue Router 中的 在导航完成前获取数据 还提供了 beforeRouteEnter  beforeRouteUpdate 两个钩子函数
 
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当钩子执行前，组件实例还没被创建
},

beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
},
 
其中 beforeRouteEnter 当数据获取成功后只调用  next  方法。（ 官文原话 ）
 
 
 
---------------------------------------------------------------   END   ------------------------------------------------------------------
 
珍惜眼前人，莫要失去才懂珍惜~~~

watch监听： 
  
监听一级路由：路由组件的渲染区域为router-view，作为顶层出口，它将匹配到的路由组件渲染在该区域中，路由组件渲染默认的方式是销毁 - 创建，因此$watch是监听不到一级路由的变化的。所以，要想使用$router监听一级路由，需要让组件成为复用组件，也就是使用keep-alive包裹router-view。
<keep-alive>
     <router-view />
</keep-alive>

watch: {
      $route: {
          handler(to,from) {
               if(from && (from.name === 'adoptSelect')){
                    this.active = 2
                }
          },
          deep:true,
          immediate: true
      }
 }
 
监听子路由：需要在有子路由的情况下，才能在当前组件监听到子组件的路由变化，直接使用下面的方式即可。
watch: {
     $route(to,from){	     
      		...
     }
 }
 
 
路由导航守卫：
//不能获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建
beforeRouteEnter(to,from,next){
      if(from.name !== 'adoptDetail'){
          next({
              path:'/adopt'
          })
      }else{
          next()
      }
}