揭秘 $router 和 $route 的奥妙：深入剖析vue 路由机制

前端

2023-09-17 16:13:19

Vue.js 路由中的 router 与 route：携手导航的动态双胞胎

在 Vue.js 的路由机制中，router 和 route 是两大支柱，携手合作，让开发者轻松驾驭应用程序的导航之海。

什么是 $router？

router 是一个全局路由器对象，掌管着整个应用程序的路由。它如同一名交通指挥，负责管理路由规则、处理导航以及获取当前路由信息。想象一下一个城市中的交通系统，router 就是那位掌控着信号灯、道路指示牌和交通流量的幕后指挥官。

什么是 $route？

route 是一个局部路由对象，仅在当前组件内活跃。它代表了当前激活的路由，提供与该路由相关的信息，例如路径、参数和查询参数。route 就如同每辆汽车的仪表盘，显示着当前位置、行驶速度和目的地。

router 与 route 的差异

作用域：

$router：全局，可在应用程序的任何角落使用
$route：局部，仅在当前组件内可用

可用信息：

$router：提供有关所有路由的详细信息
$route：提供有关当前路由的具体信息

导航：

router：提供导航方法，如 router.push()
$route：不提供导航方法，只能监听路由变化

如何使用 router 和 route

在 Vue.js 应用中，通常会在根组件中配置 router，就像在城市中心设立交通指挥中心。之后，可以在任何组件中使用 router 和 $route，就像汽车驾驶员可以通过仪表盘获取信息。

代码示例：

// 根组件（交通指挥中心）
import { createRouter, createWebHistory } from 'vue-router'

export default {
  router: createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About },
      // ...
    ]
  })
}

// 组件（汽车仪表盘）
import { computed } from 'vue'

export default {
  setup() {
    const currentRoute = computed(() => this.$route)

    // 监听路由变化，就像汽车仪表盘更新速度和目的地
    watch(currentRoute, (newRoute, oldRoute) => {
      // ...
    })
  }
}