const $route = useRoute() 和const $router = useRouter()的区别

在Vue.js中，$route和$router都是Vue Router提供的对象，用于处理路由相关的功能，但它们的作用不同。

- $route是当前路由对象，包含了当前路由的信息，例如当前路由的路径、参数、查询、hash等等。可以通过$route来获取当前路由的信息，比如$route.path、$route.query等等。
- $router是路由器对象，用于实现路由的跳转、导航等功能。通过$router.push、$router.replace等方法可以实现路由的跳转，通过$router.go、$router.back等方法可以实现路由的导航。

所以，$route和$router虽然都是Vue Router提供的对象，但是它们的作用不同，$route用于获取当前路由的信息，$router用于实现路由的跳转、导航等功能。

相关问题

<script setup lang="ts"> import { watch, ref, onMounted } from "vue"; import { useRoute } from "vue-router"; const breadcrumbList = ref<any>([]); const $route = useRoute(); onMounted(() => {}); watch( $route, () => { initBreadcrumbList(); }, { deep: true, immediate: true } ); const initBreadcrumbList = () => { breadcrumbList.value = $route.matched; console.log(breadcrumbList.value); }; </script>这段代码为什么报错

这段代码缺少模板部分，只有 `<script>` 标签是不够的。你需要在 `<template>` 中添加需要渲染的内容，例如：

<template>
  <div>
    <ul>
      <li v-for="breadcrumb in breadcrumbList" :key="breadcrumb.path">
        {{ breadcrumb.path }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
  import { watch, ref, onMounted } from "vue";
  import { useRoute } from "vue-router";

  const breadcrumbList = ref<any>([]);
  const $route = useRoute();

  onMounted(() => {});

  watch(
    $route,
    () => {
      initBreadcrumbList();
    },
    { deep: true, immediate: true }
  );

  const initBreadcrumbList = () => {
    breadcrumbList.value = $route.matched;
    console.log(breadcrumbList.value);
  };
</script>

这样就可以正常运行了。

const router = useRouter() const route = useRoute()

这两行代码看起来像是 Vue.js 3 的代码，其中 `useRouter()` 和 `useRoute()` 都是 Vue Router 提供的函数，用于在组件中访问当前路由信息。

`useRouter()` 返回一个路由实例，可以用它来访问路由信息和导航守卫。而 `useRoute()` 返回当前路由的信息对象，包括路由参数、查询参数等等。在 Vue 2 中，这两个函数分别为 `this.$router` 和 `this.$route`。