vue3+ts路由配置

1. 安装 Vue Router
   首先，你需要在你的 Vue 3 项目中安装 Vue Router。如果你使用的是 Vue CLI 创建的项目，你可以通过以下命令来安装 Vue Router：

npm install vue-router@4

2. 创建路由配置
   接下来，你需要创建一个路由配置文件。通常，这个文件被命名为 router/index.js 或 router/index.ts（如果你使用 TypeScript）。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];
 
const router = createRouter({
  history: createWebHistory(),
  routes,
});
 
export default router;

3. 在 Vue 应用中使用路由
   在你的 Vue 应用的主文件（通常是 main.js 或 main.ts）中，你需要导入并使用这个路由配置。

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // 导入路由配置
 
const app = createApp(App);
app.use(router); // 使用路由配置
app.mount('#app');

4. 创建视图组件
   确保你有对应的视图组件，如 Home.vue 和 About.vue，它们将被路由配置中的路径所引用。

<!-- Home.vue -->
<template>
  <div>Home Page</div>
</template>

<!-- About.vue -->
<template>
  <div>About Page</div>
</template>

5. 导航到路由
   你可以在模板中使用 来创建导航链接，或者使用 router.push 方法在 JavaScript 中进行编程式导航。

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link> | 
    <router-link to="/about">About</router-link>
  </nav>
  <router-view></router-view> <!-- 路由出口 -->
</template>