一.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`
},

完整的导航解析流程

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 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.noRequireTokenif (to.matched.some(r => !r.meta.noRequireToken)) {let token = store.getters.getTokenconsole.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