Vue3使用路由跳转

在Vue3中，使用路由跳转通常通过Vue Router库来实现。Vue Router是一个非常流行的前端路由库，它帮助我们将单页应用（SPA）的不同部分组织成可导航的视图。

以下是如何在Vue3项目中使用路由跳转的基本步骤：

1. **安装Vue Router**：
首先，在项目中安装Vue Router，可以通过npm或yarn进行安装：

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

2. **配置`router.config.js`**：
在`src/router`目录下创建一个`index.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;

3. **在组件中使用`this.$router`**：
在需要导航的地方，比如按钮点击事件或导航链接上，你可以使用`this.$router.push`或`this.$router.go`来导航：

   <!-- 在一个组件内的按钮 -->
   <button @click="goToAbout">
     Go to About
   </button>

   <!-- 使用组件内部的方法 -->
   methods: {
     goToAbout() {
       this.$router.push('/about');
     }
   }

4. **设置`<router-view>`**：
在App.vue或其他布局组件中，添加`<router-view>`标签，它会根据当前的路由显示相应的组件。