vue3 vue-router 的基本使用和配置方法

在 vue3 中使用 vue-router 的基本步骤如下：

1. 安装 vue-router：

npm install vue-router@4

2. 创建一个 vue-router 实例并定义路由：

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

3. 将 vue-router 实例提供给 vue 应用：

import { createApp } from 'vue';
import App from './App.vue';
 
const app = createApp(App);
app.use(router);
app.mount('#app');

4. 在 vue 组件中使用 <router-link> 和 <router-view> ：

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
 
  <router-view></router-view>
</template>

以上是 vue3 中使用 vue-router 的基本示例。在实际应用中，你可能需要根据具体需求进行更复杂的配置，比如嵌套路由、导航守卫等。