vite+vue3+ts でのルーティングルーターの使用

vite+vue3+ts でのルーティングルーターの使用

上記の記事 ( vite+vue3+ts 初心者チュートリアル) に従って、vite+vue3+ts などをインストールしてください。

pnpm install vue-router@4 //安装路由

src/router/index.tsファイルの作成

import {
    
     createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
// 路由记录，这个跟vue2中用法一致，就不做过多解释了
const routes: Array<RouteRecordRaw> = [
  {
    
    
    path: '/',
    name: 'login',
    component: () => import('../view/login/index.vue')
  },
  {
    
    
     path: "/",
     name: "Layout",
     redirect: "/index",
     component: () => import("../view/Layout/index.vue"),
     children: [
         {
    
    
             path: "/home",
             name: "home",
             component: () => 	import("../view/home/index.vue"),
             meta: {
    
    
                 title: "首页",
             },
         },
         {
    
    
             path: "/employeeList",
             name: "employeeList",
             component: () => import("../view/employee_list/index.vue"),
             meta: {
    
    
                 title: "员工列表",
             },
         },
      ],
 //{//根据需求配置
    //配置404页面
    //path: '/:catchAll(.*)',
    //name: '404',
    //component: () => import(''),
  //}
  },
];
const router = createRouter({
    
    
  history: createWebHashHistory(),
  routes
});
export default router;
 

コンポーネントに遭遇しました: () => import(“…/view/Layout/index.vue”)、エラー解決方法

または、モジュール「./routes/index」またはそれに対応する型宣言が設定 main.ts で見つからない場合

(新規ファイル作成後)

ルートディレクトリのファイル tsconfig.node.json を置き換えます。

{
    
    
  "compilerOptions": {
    
    
    "composite": true, //开启 TypeScript 项目的 hyerarchy 的特性
    "module": "ESNext", //指定了使用的模块化系统
    "moduleResolution": "Node", //指定了 TypeScript 用来解析模块的算法
    "allowSyntheticDefaultImports": true, //允许使用默认导入语法来导入没有默认导出的模块。
    "allowJs": true, //允许编译器编译 JavaScript 文件。
    "esModuleInterop": true, //true 允许使用 CommonJS 模块规范导入 ES6 模块。
    "target": "esnext", // 编译后的 JavaScript 代码目标为 ESNext 版本。
    "noEmit": true, // 不生成编译后的 JavaScript 代码文件。
    "strict": true, //开启 TypeScript 的严格模式。
    "skipLibCheck": true, //跳过对引用的库文件的类型
    "forceConsistentCasingInFileNames": true, //开启此选项，TypeScript 会忽略文件系统中的大小写差异，并且在引用文件时强制使用相同的大小写方式。
    "resolveJsonModule": true, //可以从 .json 文件中导入模块，并且编译时会生成一个引用这些模块的代码。
    "baseUrl": ".", //项目根目录
    "paths": {
    
     //路径别名
      "@/*": [ //@ 符号代替 src 目录的路径
        "src/*"
      ]
    },
  },
  "include": [ //指定了 TypeScript 编译器需要包含哪些文件或者文件夹。
    "src/**/*",
    "tests/**/*",
    "typings/**/*",
    "vite.config.ts"
  ]
}

src の vite-env.d.ts ファイル内

//增加如下
declare module "*.vue" {
    
    
    import Vue from "@/vue";
    export default Vue;
}
//在配置main.ts中遇到找不到模块“./App.vue”或其相应的类型情况解决方式也是上述解决方式
即可解决问题

main.ts ファイルの紹介

import {
    
     createApp } from 'vue'
import App from './App.vue'
 
 //routes
import router from "./router/index"; 
const app= createApp(App)
 
 //routes 
app.use(router)  
app.mount('#app')

App.vueで設定する

<script setup lang="ts">
import {
    
     RouterView } from 'vue-router'
</script>

<template>
  <RouterView />
</template>

<style scoped>
#app {
    
    
	  font-family: Avenir, Helvetica, Arial, sans-serif;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	  text-align: center;
	  color: #2c3e50;
	}
</style>

完成してすぐに使用できます