vue3+ts 路由配置以及报错解决

VUE3+TS项目 配置路由及报错解决

vue3+ts 路由配置以及报错解决

配置路由

一、 安装router

1.npm install vue-router@4
2. 或者
3. yarn add vue-router@4

二、基本配置

在src下新建router/index.ts`

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory(),
  routes: [ // 应该是 'routes'
    // 在这里定义你的路由
    {
      path: '/',
      name: 'Home',
      component: () => import('../components/text.vue'), // 示例组件
    },
    // 其他路由...
  ],
});

export default router;

注意：

1. 这里是新建一个ts文件而不是js文件，否则在main中引入index.js
   时，就会报错！！！不符合ts的语法。如果你非要写js文件，文件头部加上
   // @ts-nocheck

三、在main.ts 中挂载

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

const app = createApp(App);
app.use(router); // 使用路由
app.mount('#app');

如果出现这样的报错
说明 TypeScript 无法识别 Vue 组件的类型。可以尝试以下方法解决：

1. 安装 @vue/compiler-sfc
   如果尚未安装，运行以下命令：

npm install -D @vue/compiler-sfc

2. 创建 shims-vue.d.ts 文件
   在 src 目录下新建 shims-vue.d.ts，内容如下：

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

这样 TypeScript 就能识别 Vue 组件类型了。

3. 检查 tsconfig.json 配置
   确保 tsconfig.json 中包含以下配置：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

4. 重启 VSCode
   有时候 TypeScript 需要重启 VSCode 才能生效，试试重启编辑器。

5. 检查 vue 版本
   确保 Vue 3 相关依赖是最新的：

npm update vue @vue/compiler-sfc

四、检查 是否正确使用

确保 App.vue 中有 ：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

如果 缺失，路由不会生效。

基本就可以正常使用router啦！！！！！