Vue3+TypeScript中useRoute()出现注入缺失错误的问题

环境版本 #

• "vue": "^3.3.4"
• "vue-router": "^4.2.1"

问题描述 #

将Vue2+TypeScript+Vue Router项目升级到Vue3后，把Options API中this.$route的逻辑迁移到Composition API的useRoute()时，TypeScript版本的组件加载失败，出现以下警告和错误：

警告信息 #

[Vue warn]: injection "Symbol(route location)" not found. 
  at <Content pageName="homepage" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <Website>

错误信息 #

Uncaught (in promise) TypeError: can't access property "fullPath", $setup.myroute is undefined

注：Options API版本、JavaScript版Composition API均可正常运行，仅TypeScript版出现问题。

相关代码 #

入口文件 website.js #

import { createApp } from "vue"
import router from "./routes/router.js"
import Website from "./website.vue"
const app = createApp(Website)
app.use(router)
app.mount("#shop")

基础组件 website.vue #

<template lang="pug">
router-view
</template>

<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
    name: "Website"
})
</script>

路由文件 router.js #

import { createRouter, createWebHistory } from "vue-router"
import Content from "../components/content.vue"

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            components: {
                default: Content,
                },
            props: {
                default: { pageName: "homepage" }
            },
    ]
})

export default router

正常运行的Options API版 Content.vue #

<template lang="pug">
h1 {{ myroute.fullPath }}
</template>

<script>
export default {
    name: "Content",
    props: {
        pageName: { 
            type: String,
            required: true
        }
    },
    computed: {
        myroute() {
            return this.$route
        }   
    }
}
</script>

正常运行的JavaScript版Composition API Content.vue #

<template lang="pug">
h1 {{ myroute.fullPath }}
</template>

<script>
import { useRoute } from "vue-router"

export default {
    name: "Content",
    props: {
        pageName: { 
            type: String,
            required: true
        }
    },
    setup(props) {
        const route = useRoute()
        return {
            myroute: route
        }
    }
}
</script>

出现问题的TypeScript版Composition API Content.vue #

<template lang="pug">
h1 {{ myroute.fullPath }}
</template>

<script lang="ts">
import { useRoute } from "vue-router"
import { defineComponent } from "vue"

export default defineComponent ({
    name: "Content",
    props: {
        pageName: { 
            type: String,
            required: true
        }
    },
    setup(props) {
        const route = useRoute()
        return {
            myroute: route
        }
    }
})
</script>

解决方案 #

1. 修复<script>标签语法错误：你的TypeScript版代码中，<script lang="ts>缺少闭合引号，正确写法应为<script lang="ts">。这个语法错误会导致组件编译解析异常，进而破坏useRoute()的路由依赖注入逻辑，是问题的直接诱因。

2. 确保TypeScript配置正确：在项目根目录的tsconfig.json中，需保证核心配置项正确，避免类型解析或模块导入问题：

   {
     "compilerOptions": {
       "target": "ESNext",
       "module": "ESNext",
       "moduleResolution": "Node",
       "strict": true,
       "jsx": "preserve",
       "sourceMap": true,
       "resolveJsonModule": true,
       "esModuleInterop": true,
       "lib": ["ESNext", "DOM"],
       "types": ["vue-router"]
     },
     "include": ["src/**/*.ts", "src/**/*.vue"]
   }
   

3. 规范Props类型声明（可选）：为了更贴合TypeScript的类型约束，可以显式声明Props的类型，避免潜在的类型兼容问题：

   <script lang="ts">
   import { useRoute } from "vue-router"
   import { defineComponent, PropType } from "vue"
   
   export default defineComponent ({
       name: "Content",
       props: {
           pageName: { 
               type: String as PropType<string>,
               required: true
           }
       },
       setup(props) {
           const route = useRoute()
           return {
               myroute: route
           }
       }
   })
   </script>
   

内容的提问来源于stack exchange，提问作者David