vue3两个页面切换

在Vue 3中，页面之间的切换通常通过组件的路由管理来实现。Vue Router是一个常用的库，它可以帮助你在单页应用（SPA）中创建和管理路由。以下是基本步骤：

1. **安装依赖**：首先需要安装`vue-router`，可以使用npm或yarn命令：

   npm install vue-router
   # 或者
   yarn add vue-router

2. **配置router.js**：在项目根目录下创建一个名为`router.js`的文件，配置你的路由规则，比如定义几个页面组件并设置它们对应的URL路径：

   import Vue from 'vue'
   import Router from 'vue-router'

   Vue.use(Router)

   const routes = [
     { path: '/page1', component: Page1 },
     { path: '/page2', component: Page2 }
   ]

   export default new Router({
     routes,
   })

3. **在App.vue中使用路由**：将路由实例挂载到Vue全局实例上，并设置当前视图：

   <template>
     <div id="app">
       <router-view></router-view>
     </div>
   </template>

   <!-- ... -->
   <script>
   import router from './router'

   export default {
     // ...
     setup() {
       return { router }
     }
   }
   </script>

4. **页面间的跳转**：在需要跳转的地方，如按钮点击事件中，使用`this.$router.push('/path')`或其他API（如`replace`、`alias`等）进行导航。

5. **守卫生命周期钩子**：如果想在跳转前做些验证或者处理，可以使用路由守卫，如`beforeEach`。