vue3使用router

Vue 3 使用 Vue Router 进行路由管理。下面是使用 Vue 3 和 Vue Router 的基本步骤：

步骤 1: 安装 Vue Router
在项目目录下，运行以下命令来安装 Vue Router：

npm install vue-router@next

步骤 2: 创建路由实例
在你的项目中创建一个 `router.js` 文件，并添加以下内容：

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  // 添加其他路由配置
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

在这个例子中，我们创建了一个简单的路由配置，将根路径 `/` 映射到 `Home` 组件。

步骤 3: 在主组件中引入路由
在你的主组件（通常是 `App.vue`）中引入路由，并在模板中使用 `<router-view>` 来渲染组件：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { createApp } from 'vue';
import router from './router';

export default {
  name: 'App',
  router,
  // 其他组件选项
}
</script>

这样，`<router-view>` 将会根据当前路由的路径动态渲染相应的组件。

步骤 4: 在组件中定义路由链接
在需要导航到其他页面的组件中，你可以使用 `<router-link>` 来定义路由链接：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <!-- 其他链接 -->
  </div>
</template>

这样，当用户点击链接时，路由会自动切换到相应的路径，并渲染对应的组件。

这就是使用 Vue 3 和 Vue Router 进行路由管理的基本步骤。你可以根据需要添加更多的路由配置和组件。希望对你有所帮助！