vue3 - 使用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

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

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

Answer 2

这得看 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 3

你遇到的问题是因为<el-link>是Element UI库中的一个组件，它只是一个简单的链接组件，它的行为类似于HTML中的<a>标签。当你点击这个链接时，它会尝试导航到指定的URL，这通常会导致页面刷新。

另一方面，<router-link>是Vue Router库中的一个组件。它用于在Vue应用程序中进行路由导航。当你点击<router-link>时，Vue Router会捕获这个事件并阻止其默认的导航行为，然后它会根据路由配置进行导航，这通常不会导致页面刷新。

在你的情况下，你已经为/articles/:id路径定义了一个路由，所以你应该使用<router-link>而不是<el-link>。你已经正确地使用了<router-link>，并且它工作得很好。

如果你想继续使用<el-link>并避免页面刷新，你可以尝试使用JavaScript来阻止其默认的导航行为。你可以通过添加一个点击事件监听器并在事件处理器中调用event.preventDefault()来实现这一点。但是，这通常不是一个好的做法，因为它可能会导致一些不期望的副作用。

总的来说，如果你正在使用Vue Router进行路由导航，那么最好始终使用<router-link>组件。它不仅与Vue Router的路由系统更好地集成，而且还可以避免一些与页面刷新相关的问题。