Vue3如何使用路由

Vue3中使用路由通常会配合Vue Router库来管理应用的不同视图和URL。以下是安装和设置基本路由的基本步骤：

1. **安装Vue Router**:
首先，你需要通过npm或yarn安装Vue Router：

   npm install vue-router

或者

   yarn add vue-router

2. **创建Router实例**:
在主入口文件（如`main.js`）中，引入Vue Router并创建一个新的Router实例：

   import { createRouter, createWebHistory } from 'vue-router';
   
   const router = createRouter({
     history: createWebHistory(), // 使用浏览器的历史API
     routes: [
       { path: '/', component: HomeComponent },
       { path: '/about', component: AboutComponent },
       {/* 更多路由配置 */}
     ]
   });

3. **挂载路由器**:
将router实例挂载到Vue的应用上：

   import App from './App.vue';

   new Vue({
     app,
     router
   }).$mount('#app');

4. **导航和组件间通信**:
- 使用`this.$router.push(path)`或`this.$router.replace(path)`进行页面跳转。
- 可以使用`<router-link>`标签链接到不同的路由。

5. **守卫（Guards）**: 如果需要在导航发生前或后执行一些操作，可以定义全局或路由级别的守卫（例如：`beforeEach`, `beforeEnter`等）。