vue this.$router 的用法

this.$router 在 Vue.js 中是一个非常有用的实例属性，它代表了 Vue Router 的实例。通过这个实例，你可以访问到路由的多种功能，比如编程式导航、获取当前路由信息等。以下是一些 this.$router 的用法示例：

1. 编程式导航

编程式导航是 Vue Router 提供的另一种导航方式，与 <router-link> 组件的声明式导航相对。你可以使用 this.$router.push 或 this.$router.replace 方法来实现编程式导航。

// 使用 push 方法导航到不同的 URL，这个方法会向 history 栈添加一个新的记录  
this.$router.push('/some-path');  
  
// 或者使用对象  
this.$router.push({ path: '/some-path' });  
  
// 使用 name，如果路由配置了 name  
this.$router.push({ name: 'someRouteName', params: { userId: 123 }});  
  
// 使用 replace 方法，它不会向 history 添加新记录，而是替换掉当前的 history 记录  
this.$router.replace('/some-path');

2. 导航守卫

虽然 this.$router 本身不直接用于定义导航守卫，但它是实现导航守卫的关键。在 Vue Router 中，你可以使用全局守卫、路由独享的守卫、组件内的守卫来守卫导航。这些守卫可以基于用户权限、路由状态等条件决定是否允许导航。

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

注意：虽然 this.$router 与导航守卫的实现紧密相关，但直接在 this.$router 上定义守卫是不正确的。守卫是通过 Vue Router 实例（即 router）来定义的，而不是通过组件的 $router 属性。

3. 获取当前路由信息

你可以通过 this.$route（注意是 $route 而不是 $router）来访问当前路由的信息，包括解析得到的信息，以及 URL 解析得到的信息还有路由记录（route records）。

// 在组件内部  
export default {  
  mounted() {  
    console.log(this.$route.path); // 当前路由的 path  
    console.log(this.$route.query); // 一个包含路由中查询参数的对象。例如，对于路径 "/foo?user=1"，则有 $route.query.user == 1  
    console.log(this.$route.params); // 一个包含动态片段和全星片段的星号片段的键值对的对象  
    // ...  
  }  
}