vue3 按钮点击路由跳转 地址设置多级

Vue3 中，通过按钮点击实现路由跳转并设置多级地址通常涉及到Vuex管理和组件间的通信。你可以按照以下步骤操作：

1. **安装依赖**：首先需要安装 Vue Router 和 Vuex，如果还没有安装，可以使用 `npm install vue-router vuex` 或者 `yarn add vue-router vuex`。

2. **配置路由**：在项目根目录创建一个 `router` 文件夹，并在其中创建 `index.js` 配置路由文件，设置多级路径，例如：

   import { createRouter, createWebHistory } from 'vue-router'
   
   const routes = [
     {
       path: '/home',
       name: 'Home',
       component: HomeComponent,
     },
     {
       path: '/home/about',
       name: 'About',
       component: AboutComponent,
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes,
   })

3. **Vue组件中使用导航守卫（Guards）**：在组件内使用 `beforeRouteEnter`、`beforeRouteUpdate` 等钩子，在用户点击按钮时更新路由和状态。例如，假设有一个按钮触发跳转：

   <button @click="navigateToChildPage">跳转到子页</button>

   export default {
     methods: {
       navigateToChildPage() {
         this.$router.push({ name: 'About', params: { parentId: 'Home' } });
       }
     },
     // 在这里添加导航守卫，如 beforeRouteEnter
   }

4. **Vuex 中管理路由状态**：如果你需要在多处组件间共享路由信息，可以在 Vuex store 中定义状态和 mutations。比如，添加一个 `route` 或 `activeRoute` 的状态跟踪当前路由。

5. **组件间通信**：使用 `mapState` 或 `mapActions` 将需要的数据和方法从 store 映射到组件，以便访问和更新路由状态。