在 Vue.js 中，$route 和 $router 是 Vue Router 提供的两个非常重要的对象，它们用于管理和操作路由。
1. $route 对象
-
定义：
$route是一个响应式的对象，它包含了当前激活路由的所有信息，例如路径、参数、查询字符串等。你可以把它看作是“当前路由快照”。 -
常见属性：
path: 当前路由的路径。params: 动态路径参数（如/user/:id中的id）。query: URL 查询参数，以键值对形式存在。hash: URL 中的哈希部分（即#后面的内容）。name: 命名路由的名字。matched: 匹配到的路由记录数组，每个记录包含组件配置等信息。fullPath: 完整的路径，包括查询参数和哈希。console.log(this.$route.path); // 打印当前路径 console.log(this.$route.params.id); // 打印动态路径参数 id
-
$route的用途
-
读取路由信息：你可以使用
$route来访问当前路由的各种信息，如路径 (path)、参数 (params)、查询字符串 (query) 等等。 -
动态组件渲染：根据
$route中的数据（比如name或params），可以实现动态加载不同的组件或内容。 -
导航守卫：虽然
$route本身不直接用于导航控制，但它可以在导航守卫（如beforeEach、beforeEnter）中被用来判断是否允许用户进行特定的导航动作。
2. $router 对象
- 描述：
$router是路由器实例，是整个应用路由系统的管理者。 - 方法：提供了如
push(),replace(),go(),back(),forward()等方法来进行页面间的导航。 - 配置：可以通过这个对象访问路由的配置信息，并且可以添加动态路由或者监听路由变化。
-
$router的用途
-
编程式导航：利用
$router.push()、$router.replace()、$router.go()等方法，你可以在代码中实现页面间的跳转。 -
修改历史记录：可以通过
$router的方法向浏览器的历史栈中添加或替换记录。 -
监听路由变化：尽管通常我们会直接监听
$route对象的变化，但$router提供了钩子函数（如afterEach），这些钩子可以在每次导航完成后执行某些逻辑。 -
全局/局部导航守卫：
$router允许设置全局或针对单个组件的导航守卫，以便在进入或离开某个路由之前执行特定的检查或准备工作。
// 导航到新页面
this.$router.push({ name: 'user', params: { userId: 123 } });
// 替换当前页面而不添加历史记录
this.$router.replace('/home');
// 返回上一页
this.$router.go(-1);