vue超链接跳转子组件

### Vue 中实现超链接跳转到子组件的方法

在 Vue 应用程序中，可以通过 `<router-link>` 组件来创建导航链接，从而实现在不同视图之间进行跳转。对于带有 `.View.vue` 结尾的视图子组件而言，这些通常是通过路由配置来进行管理并展示于应用的主要区域。

#### 使用 `<router-link>` 进行声明式导航

当希望构建一个简单的超链接用于页面间的切换时，可以利用 `<router-link>` 来定义路径，并指定目标组件作为该路径下的显示内容[^1]：

<template>
  <div>
    <!-- 声明式导航 -->
    <router-link :to="{ name: 'HomeView' }">前往首页</router-link> |
    <router-link :to="{ name: 'ShopListView'}">商家列表</router-link> |
    <router-link :to="{ name: 'ProductListView', params: { id: productId }}">商品详情</router-link>
  </div>
</template>

<script setup>
import { ref } from "vue";

const productId = ref('product_007');
</script>

上述代码片段展示了如何设置多个指向特定命名路由（如 `HomeView`, `ShopListView` 和 `ProductListView`）的链接。这里假设已经存在相应的路由规则，在点击相应链接之后会加载对应的 View.vue 文件中的组件[^3]。

#### 编程式导航配合传递参数

除了使用 `<router-link>` 外，还可以采用编程式的导航方式完成更复杂的逻辑处理或动态生成 URL 地址。这允许开发者更加灵活地控制应用程序的状态变化以及向下一个页面发送额外的数据信息:

// 在 methods 或者事件处理器内调用此函数
function navigateToProductDetail(productId) {
  this.$router.push({
    name: 'ProductDetailView',
    params: { id: productId },
    query: { sourcePage: 'current_page_name'}
  });
}

这段 JavaScript 函数演示了怎样借助 `$router.push()` 方法执行一次新的历史记录条目推送动作，同时附带一些查询字符串形式附加的信息给即将访问的目标页面[^4]。