Vue3中unref的作用与VueRoutercurrentRoute的知识

目录 前言1. unref2. Demo

前言

从实战中学习，了解一点点知识点

unref 主要用于解包 ref，特别是在 Vue Router 4 里，currentRoute 是一个响应式 ref，需要 .value 或 unref 来访问具体字段

1. unref

unref 是 Vue 3 提供的工具函数，可以解包 ref 值，即：

如果传入的是 ref，返回 ref.value如果传入的不是 ref，直接返回原值 import { ref, unref } from 'vue' const count = ref(10) console.log(count.value) // 10 console.log(unref(count)) // 10 console.log(unref('Hello Vue 3')) // 'Hello Vue 3' (非 ref 直接返回)

再者为什么 currentRoute 需要 unref？ 为何要用unref来解析呢

在 Vue Router 4 里，useRouter().currentRoute 是一个 ref 对象，用于存储当前路由信息

const router = useRouter() console.log(router.currentRoute) // 这是一个 ref 对象 console.log(router.currentRoute.value) // 访问当前路由信息

由于 currentRoute 是 ref，所以要获取 name、path 等字段时，可以使用：

const { name } = router.currentRoute.value

或者：

const { name } = unref(router.currentRoute)

它的实际应用放在监听当前路由变化，或者访问 name、path、meta 等字段

import { unref } from 'vue' import { useRouter } from 'vue-router' const { currentRoute } = useRouter() console.log(unref(currentRoute)) // 打印完整的当前路由对象 console.log(unref(currentRoute).name) // 获取路由 name 2. Demo

具体小例子：

<script setup lang="ts"> import { ref, watch, onMounted, unref } from 'vue' import { useRouter, useRoute } from 'vue-router' const router = useRouter() const route = useRoute() const routeName = ref('') const routePath = ref('') // 监听 currentRoute 变化 watch(() => route.name, (newName) => { routeName.value = newName as string console.log('当前路由 name:', newName) }) watch(() => route.path, (newPath) => { routePath.value = newPath console.log('当前路由 path:', newPath) }) // 在 mounted 阶段输出初始值 onMounted(() => { console.log('完整的路由对象:', unref(router.currentRoute)) console.log('当前路由 name:', unref(router.currentRoute).name) console.log('当前路由 path:', unref(router.currentRoute).path) }) </script> <template> <div> <h2>当前路由信息</h2> <p>路由名称: {{ routeName }}</p> <p>路由路径: {{ routePath }}</p> </div> </template>