Vue 3 中路由vue-router

在 Vue 3 中，路由功能通常使用 vue-router 库来实现。以下是一般的路由配置步骤：

1. 安装 vue-router：使用包管理工具（如 npm 或 yarn）安装 vue-router。

npm install vue-router@4

2. 创建路由配置：在项目中创建一个路由配置文件（通常是 router.js 或 index.js），并定义路由规则。
3. 定义路由组件：创建与路由对应的组件。
4. 配置路由：在路由配置文件中，使用 createRouter 函数创建路由实例，并配置路由规则和组件的映射关系。

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

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

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

export default router;

7. 挂载路由：在 Vue 应用的入口文件（通常是 main.js）中，使用 createApp 创建 Vue 应用实例，并通过 useRouter 挂载路由。

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

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

8. 在组件中使用路由：在组件中可以通过 $route 对象访问当前路由信息，通过 router-link 组件进行路由导航。

<template>
  <div>
    <h1>My App</h1>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

在上述代码中，<router-link> 组件用于创建导航链接，to 属性指定链接的目标路由。<router-view> 组件用于显示当前路由对应的组件内容。 这样，当用户点击导航链接时，页面会根据路由规则切换到相应的组件。 这只是一个基本的概述，实际的路由配置可能会根据项目的需求进行调整。你可以参考 vue-router 的官方文档以获取更详细的指导和示例。

请注意，确保在使用路由功能时遵循最佳实践，例如正确处理路由参数、导航守卫、懒加载等。此外，根据项目的规模和复杂性，你可能还需要考虑路由的嵌套、动态路由等高级功能。