vue3路由怎么配置

Vue 3 中的路由配置与 Vue 2 中的配置方式有所不同。在 Vue 3 中，你可以使用 Vue Router 4 来进行路由配置。下面是一个简单的示例：

1. 首先，安装 Vue Router 4：

npm install vue-router@4

2. 在你的 Vue 3 项目中，创建一个 `router.js` 文件，并进行路由配置：

import { createRouter, createWebHistory } from 'vue-router';

// 导入组件
import Home from './components/Home.vue';
import About from './components/About.vue';
import Contact from './components/Contact.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  },
  {
    path: '/contact',
    name: 'Contact',
    component: Contact
  }
];

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

export default router;

在上面的示例中，我们定义了三个路由：`Home`、`About` 和 `Contact`，分别对应不同的组件。

3. 在你的 `main.js` 文件中，导入 `router.js` 并将其挂载到 Vue 实例上：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在，你已经完成了 Vue 3 中的路由配置。你可以在组件中通过 `<router-link>` 标签来导航到不同的路由，并使用 `<router-view>` 标签来显示当前路由对应的组件内容。