当前位置: 首页> 文旅> 酒店 > [Vite+Vue3+TS] Router的使用

[Vite+Vue3+TS] Router的使用

时间:2025/7/9 6:37:18来源:https://blog.csdn.net/qq_45831414/article/details/139886758 浏览次数:0次

1. 安装Vue Router

npm install vue-router@4 --save

这会安装Vue Router的最新4.x版本,并将其添加到你的package.json依赖中。

2. 创建路由配置文件

src目录下创建一个名为router的文件夹(如果尚未存在),并在该文件夹内创建一个index.js文件。这将是你的路由配置文件。

3. 配置路由

src/router/index.ts中,配置你的路由。例如:

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';const routes = [{path: '/',name: 'HelloWorld',component:  () => import('@/components/HelloWorld.vue')},// 添加更多路由...
];const router = createRouter({history: createWebHistory(),routes,
});export default router;
3.1 设置路径别名(src与@)

path模块是node.js内置的功能,但是node.js本身并不支持typescript,所以需要NPM下载插件

npm install @types/node --save-dev

vite.config.ts文件中加入别名解析

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],resolve: {// 配置别名alias: {'@': resolve(__dirname, './src')}},
})

接着在tsconfig.app.json文件中加入baseUrlpaths

{"compilerOptions": {"baseUrl": ".","paths": {"@/*": ["src/*"]},"composite": true,"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo","target": "ES2020","useDefineForClassFields": true,"module": "ESNext","lib": ["ES2020", "DOM", "DOM.Iterable"],"skipLibCheck": true,/* Bundler mode */"moduleResolution": "bundler","allowImportingTsExtensions": true,"resolveJsonModule": true,"isolatedModules": true,"moduleDetection": "force","noEmit": true,"jsx": "preserve",/* Linting */"strict": true,"noUnusedLocals": true,"noUnusedParameters": true,"noFallthroughCasesInSwitch": true},"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3.1 这一步骤做完之后记得重启编辑器(VS Code),否则配置文件修改后不会生效

4. 在主应用中使用路由

在你的main.ts文件中引入并使用路由实例:

// src/main.js 或 src/main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'createApp(App).use(router).mount('#app');

5. 使用路由

现在你可以在你的应用中使用<router-link>组件来创建导航链接,以及<router-view>来展示路由对应的组件。
例如在main.app中使用路由出口:

<script setup lang="ts">
</script><template><div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><router-view></router-view> <!-- 路由出口 --></template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

参考链接:
在ts+vite项目中使用path模块提示错误
vite 配置
vite项目中配置路径别名@

关键字:[Vite+Vue3+TS] Router的使用

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: