Vue3中 在 TypeScript 文件中无法使用 useRouer 和 useRoute 的方法和属性是怎么回事?如何解决?

Vue3中 在 TypeScript 文件中无法使用 useRouer 和 useRoute 的方法和属性是怎么回事?如何解决?

问题描述:
在 Vue3 中,TypeScript 文件中如何使用 useRouer 和 useRoute 的方法和属性是怎么回事? 如何解决?

相关代码(错误代码):

// 以下是错误的示例代码,也是我最开始写的代码
import {getCurrentInstance} from "vue";
import { useRouter } from "vue-router";  // 引入 vue-router
const router = useRouter(); // 实例化 router
console.log(router); // 打印 router; 此处就开始为 => undefined
...
// 执行代码
export const getDailyRecommend = (): void => {
	router.push("/dailyRecommend");  // 报错 => undefined.push
}

以上代码一开始我以为没什么问题,那么为什么会报错?后来找到了原因:

在 Vue3 中,这个 hooks 只能在 setup 中才可以这样引入并调用。
在 JavaScript 或者 TypeScript 中,需引入使用我们导出的实例 router

以下是引入方式:

使用router
import "router" from "@/router"(位置随 router 位置变化而变化)
或者
import "router" from "../router"(位置随 router 位置变化而变化)

使用route
const route = router.currentRoute.value
  • 14
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 在设计时就考虑了 TypeScript 的支持,因此使用 TypeScript 开发 Vue 3 应用非常方便。下面是使用 TypeScript 开发 Vue 3 应用的步骤: 1. 创建一个 TypeScript 项目 首先需要创建一个 TypeScript 项目,可以使用 Vue CLI 创建一个 TypeScript 项目: ``` vue create my-project ``` 在创建项目时选择 TypeScript: ``` ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TypeScript, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript for auto-detected polyfills? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ``` 2. 安装 Vue 3 因为 Vue 3 目前还处于 beta 版本,所以需要安装 `vue@next`。 ``` npm install vue@next --save ``` 3. 编写组件 在 TypeScript 编写 Vue 组件需要使用类的形式,例如: ```typescript import { defineComponent } from 'vue'; export default defineComponent({ name: 'HelloWorld', props: { msg: String, }, setup(props) { return { msg: props.msg, }; }, }); ``` 4. 配置 TypeScriptVue 3 使用 TypeScript 需要做一些配置,如在 `tsconfig.json` 添加 `Vue` 的声明文件: ```json { "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "allowSyntheticDefaultImports": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true }, "include": ["src", "tests", "typings", "shims-vue.d.ts"], "exclude": ["node_modules"], "files": ["./node_modules/vue/types/vue.d.ts"] } ``` 还需要在 `shims-vue.d.ts` 声明 Vue 类型: ```typescript declare module '*.vue' { import { defineComponent } from 'vue'; const component: ReturnType<typeof defineComponent>; export default component; } declare module 'vue' { export interface ComponentCustomProperties { $store: Store<State>; } } ``` 5. 使用组件 在 Vue 3 使用 TypeScript 编写的组件和使用 JavaScript 编写的组件是一样的,只需要像平常一样引入组件即可: ```vue <template> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> </template> <script lang="ts"> import { defineComponent } from 'vue'; import HelloWorld from '@/components/HelloWorld.vue'; export default defineComponent({ components: { HelloWorld, }, }); </script> ``` 以上就是在 Vue 3 使用 TypeScript 的步骤。需要注意的是,因为 Vue 3 目前还处于 beta 版本,所以在使用时可能会遇到一些问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值