前言

使用vue的时候我们经常会遇到route和router这两个对象。它们都与路由相关，并且在应用程序中也有关系键的作用，但它们具有不同的功能和职责。下面我将详细解释route和router的区别

$route

route是Vue中的路由信息对象。它包含了当前激活的路由的信息，可以通过访问$route来获取当前路由的各种属性,通过访问route对象，我们可以根据当前路由的属性进行条件判断、获取参数以及进行其他操作

• route.path：表示当前路由的路径，字符串，总是解析为绝对路径
• route.query：表示URL查询参数的对象，可以通过$route.query来获取查询参数
• route.params：一个包含了动态路由参数的对象，通过动态路由定义的参数，是一个键值对对象
• route.fullPath：表示完整的URL路径，包括查询参数和哈希值
• route.name：表示当前路径名字
• route.hash：表示URL中的哈希值
• route.meta：路由元信息

mounted() {
  const ID = this.$route.query.id;
  console.log(`当前id是：${ID}`);
}

$router

router是Vue的路由实例，它负责路由的跳转和导航控制。router对象提供了一些方法，用于在Vue应用程序中进行路由导航,通过router对象，我们可以在Vue应用程序中进行路由导航，实现不同路由之间的跳转和页面切换

• router.push(location)：导航到一个新的路由，可以传递一个路径字符串或一个描述地址的对象作为参数
• router.replace(location)：用于替换当前的路由记录，不会向history栈添加一个新的记录
• router.go(n)：在历史记录中或实体移动多少步，类似于浏览器的前进和后退操作。n可以是一个正数或负数。
• router.back()：后退一页，相当于$router.go(-1)
• router.forward()：前进一页，相当于$router.go(1)

methods: {
  goDetail() {
    this.$router.push('/detail');
  }
}

总结

$route和$router是Vue用于处理路由和导航的两个不同对象

$route对象用于获取当前路由的信息，

$router对象用于进行路由的控制或者导航