一文详解:Vue3中使用Vue Router

在Vue 3中使用Vue Router需要几个步骤：

1. 安装Vue Router：

npm install vue-router@4

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

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

3. 在Vue应用中使用router实例：

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

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

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

以上是使用Vue Router的基本步骤，确保按照这些步骤操作，你的Vue 3项目就能够使用Vue Router来实现前端路由了。