vue3如何跳转到其他页面

在Vue3中，可以使用Vue Router来进行页面的跳转。具体步骤如下：

1. 安装Vue Router：在命令行中输入 `npm install vue-router` 进行安装。

2. 创建路由：在项目中的 `src` 目录下新建一个名为 `router.js` 的文件，并在文件中编写路由配置，例如：

   import { createRouter, createWebHashHistory } 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: createWebHashHistory(),
     routes
   })
   
   export default router

上述代码中，我们通过 `createRouter` 方法创建了一个路由实例，并通过 `history` 属性指定了路由模式为哈希模式。路由配置中包含了两个路由，一个是根路由 `'/'` 对应的是 `Home.vue` 组件，另一个是 `/about` 对应的是 `About.vue` 组件。

3. 在Vue应用中使用路由：在Vue应用的入口文件中（例如 `main.js`）导入路由实例，并将其挂载到Vue实例上，例如：

   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` 组件来进行跳转。例如，在 `Home.vue` 组件中添加一个跳转到 `About.vue` 组件的链接：

   <template>
     <div>
       <h1>Home</h1>
       <router-link to="/about">Go to About</router-link>
     </div>
   </template>

在上述代码中，我们通过 `to` 属性指定了要跳转的路径为 `/about`，并在链接中添加了文本内容。

除了使用 `router-link` 组件之外，还可以通过编程式导航的方式进行跳转。例如，在 `Home.vue` 组件中添加一个按钮，点击该按钮后跳转到 `About.vue` 组件：

   <template>
     <div>
       <h1>Home</h1>
       <button @click="gotoAbout">Go to About</button>
     </div>
   </template>
   
   <script>
   export default {
     methods: {
       gotoAbout() {
         this.$router.push('/about')
       }
     }
   }
   </script>

在上述代码中，我们通过调用 `$router.push` 方法来实现跳转，该方法接受一个路径作为参数，并将页面跳转到指定路径。