使用element-plus中的e-link，点击后导致页面刷新怎么办？

Question

使用element-plus中的e-link，点击后导致页面刷新怎么办？

<script setup>
const props = defineProps([
    'article_id'
]);
const url = '/articles/' + props.article_id;
</script>

<template>
<el-link :href="url" class="text-size-2xl text-dark/75 decoration-none">
                {{ article_id }} 这里是标题！！！
            </el-link>
</template>

但使用router-link就没问题，不会导致刷新

<template>
<router-link :to="url" class="text-size-2xl text-dark/75 decoration-none">
                {{ article_id }} 这里是标题！！！
            </router-link>
</template>

路由配置如下：

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import ArticleView from '../views/ArticleView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'home',
      component: HomeView
    },
    {
      path: '/articles/:id',
      name: 'article',
      // component: () => import('../views/ArticleView.vue')
      component: ArticleView
    }
  ]
})

export default router

前端新手，求指点，谢谢！

Answer 1

这得看 el-link 的内部实现。很明显是使用 <a> 元素来实现跳转的。

<template>
  <a
    :class="linkKls"
    :href="disabled || !href ? undefined : href"
    :target="disabled || !href ? undefined : target"
    @click="handleClick"
  >
    <el-icon v-if="icon"><component :is="icon" /></el-icon>
    <span v-if="$slots.default" :class="ns.e('inner')">
      <slot />
    </span>

    <slot v-if="$slots.icon" name="icon" />
  </a>
</template>

所以直接使用 router-link 就好了，如果要使用 el-link 的样式，可以通过插槽传入 router-link。例如：

<el-link class="text-size-2xl text-dark/75 decoration-none">
  <router-link :to="url">{{ article_id }} 这里是标题！！！</router-link>
</el-link>

或者在 el-link 上给点击事件做跳转处理。

Answer 2

如果是hash路由 前面拼接个#

<el-link :href="‘#’+url" class="text-size-2xl text-dark/75 decoration-none">
    {{ article_id }} 这里是标题！！！
</el-link>