route.matched中的value和_value的区别

在Vue Router中，`route.matched`是一个数组，包含了当前路由匹配到的所有路由记录对象。而每个路由记录对象包含了两个关键属性：`value`和`_value`，它们的区别如下：

1. `value`是一个路由记录对象原始的不可变属性，表示当前路由的匹配信息。它包含了路由的路径、名称、组件等相关信息。它通常用于辅助路由的生成和渲染。
2. `_value`是一个与`value`相同的属性，但具有可变性。当路由匹配发生变化时，`_value`会随之更新，而`value`保持不变。这对于动态路由的场景非常有用，可以通过监听`route`对象的变化，及时获取路由匹配信息的最新状态。

总结来说，`route.matched`中的`value`是路由记录对象的原始属性，而`_value`是其可变的副本。对于大多数情况下，我们可以直接使用`value`来获取路由的匹配信息。只有在需要实时更新路由匹配信息的场景下，才需要关注`_value`的变化。

相关问题

watch: { $route: { immediate: true, handler (route) { this.updateCurrentPath(route.path) this.list = route.matched.map(item => { return { name: item.name, label: this.routesMap.get(item.name) } }) } } }改用setup和ts编写这个函数

好的，以下是使用 `setup` 和 TypeScript 重写这个函数的示例代码：

import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue'
import { RouteLocationNormalized } from 'vue-router'

export default defineComponent({
  setup() {
    const currentPath = ref('')
    const routesMap = new Map([
      ['home', '首页'],
      ['about', '关于'],
      ['contact', '联系我们'],
    ])
    const list = ref<Array<{ name: string; label: string }>>([])

    const updateCurrentPath = (path: string) => {
      currentPath.value = path
    }

    const updateList = (route: RouteLocationNormalized) => {
      list.value = route.matched.map(item => ({
        name: item.name as string,
        label: routesMap.get(item.name as string) as string,
      }))
    }

    onMounted(() => {
      updateCurrentPath(window.location.pathname)
      updateList({ ...$route })
    })

    onBeforeUnmount(() => {
      // do cleanup work here
    })

    return {
      currentPath,
      list,
    }
  },
})

需要注意的是，在 `options API` 中，我们可以直接使用 `$route` 对象来监听路由变化，而在 `setup` 函数中，我们需要通过 `useRoute` 函数来获取 `$route` 对象。此外，在 `setup` 函数中，我们还需要手动处理组件的生命周期钩子函数。

<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>

这样就可以正常运行了。