vue3-element-admin怎么跳转

### 关于 `vue3-element-admin` 项目中的页面跳转实现

在 `vue3-element-admin` 中，页面之间的导航通常依赖 Vue Router 来完成。为了实现在组件内通过按钮触发的页面跳转，并可以携带参数给目标页面，推荐的做法是利用编程式的导航功能。

#### 编程式导航实例
当需要从当前页面跳转到另一个页面时，可以通过调用 `$router.push()` 方法来执行这一操作。如果希望向新页面传递一些必要的信息，则可以在路径后面附加查询字符串或是命名路由配合 params 参数一起使用[^4]。

下面是一个具体的例子展示如何在一个按钮点击事件处理器里设置这样的逻辑：

// 假设这是某个.vue 文件里的<script setup>部分或者是methods选项内的函数定义
import { useRouter } from 'vue-router';

const router = useRouter();

function navigateToTargetPage() {
    const id = 123; // 这里假设我们要发送一个ID作为参数
    
    // 使用path模式下的query方式进行简单传参
    router.push({
        path: '/target', 
        query: { paramId: id }
    });
}

对于接收端即 `/target` 对应的目标页面来说，在其生命周期钩子或者组合API中读取这些参数就变得很重要了:

// 在目标页(.vue文件)内部获取上一页传来参数的例子
<template>
  <!-- 组件模板 -->
</template>

<script lang="ts">
export default defineComponent({
  name: "TargetView",
  
  mounted(){
      console.log(this.$route.query.paramId); // 输出URL上的查询参数
  },
});
</script>

此外，也可以采用更复杂的配置如带有动态段的名字路由以及 props 属性映射等高级特性来进行更加灵活的数据传输和处理。