首先，确保你的项目中已经安装了 vue-router，如果没有安装，可以通过以下命令进行安装：
npm install vue-router
然后，你可以创建一个路由配置文件，例如 router.js：
// router.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{
path: '/',
component: Home,
},
{
path: '/about',
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
在上述代码中，我们定义了两个路由：一个是根路径 '/' 对应 Home 组件，另一个是 '/about' 对应 About 组件。
然后，在你的应用入口文件（通常是 main.js）中，使用创建的路由配置：
// 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');
在你的模板中，你可以使用 <router-view> 来渲染当前路由匹配到的组件。例如，在 App.vue 中：
<!-- App.vue -->
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
// ...
};
</script>
这样，根据路由的变化，<router-view> 会渲染匹配到的组件，从而实现页面的切换。
当然，这只是一个简单的示例。Vue Router 还支持更多的功能，例如嵌套路由、路由参数、路由导航守卫等。你可以查阅 Vue Router 的官方文档以获取更详细的信息和用法。
转载请注明出处：http://www.zyzy.cn/article/detail/12986/Vue3