以下是在 Vue 3.0 中使用 Vue Router 的基本步骤：
1. 安装 Vue Router
使用 npm 或 yarn 安装 Vue Router：
npm install vue-router
2. 创建并配置路由
在项目的 src 目录下创建一个 router 文件夹，然后在该文件夹下创建一个 index.js 文件，用于配置路由：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
在上述代码中，我们定义了两个路由：/ 对应 Home 组件，/about 对应 About 组件。你需要根据你的项目结构和组件来进行相应的配置。
3. 在主应用中使用路由
在主应用入口文件（比如 src/main.js）中引入并使用路由：
// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');
4. 创建路由对应的视图组件
在 src/views 目录下创建 Home.vue 和 About.vue 文件，分别用于渲染 / 和 /about 路由对应的视图：
<!-- src/views/Home.vue -->
<template>
<div>
<h1>Home</h1>
</div>
</template>
<!-- src/views/About.vue -->
<template>
<div>
<h1>About</h1>
</div>
</template>
5. 在应用中使用路由
在你的应用中，你可以使用 <router-link> 组件来实现导航链接，使用 <router-view> 来渲染当前路由对应的组件。
<!-- src/App.vue -->
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>
以上是一个简单的 Vue Router 配置和使用的例子。你可以根据项目的实际需求，配置更复杂的路由结构，包括嵌套路由、动态路由等。在 Vue Router 的文档中能够找到更详细的配置和使用信息：[Vue Router 文档](https://router.vuejs.org/)。
转载请注明出处：http://www.zyzy.cn/article/detail/530/Vue 3.0