vue3路由+ts 点击切换路由
时间: 2023-08-13 20:56:16 浏览: 53
在Vue 3中使用路由和TypeScript创建点击切换路由的功能,你可以按照以下步骤进行操作:
1. 首先,确保已经安装了vue-router和TypeScript相关的依赖包。你可以使用以下命令安装它们:
```
npm install vue-router@next
npm install -D @types/vue-router
```
2. 创建一个`router`文件夹,在其中创建一个`index.ts`文件来配置路由。在`index.ts`中,你需要导入Vue和vue-router,然后创建一个新的路由实例。
```typescript
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
3. 在主入口文件(一般是`main.ts`)中,导入路由文件并将其挂载到Vue应用上。
```typescript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
```
4. 在Vue组件中,你可以使用`<router-link>`组件来创建路由链接,使用`<router-view>`组件来显示路由组件。
```html
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
```
这样,当你点击路由链接时,路由会自动切换到对应的页面组件。
希望这能帮助到你!如果有更多问题,请随时提问。