ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

el-button添加routes跳转

2024-08-01 10:13:08  阅读:186  来源: 互联网

标签:


要在 Element UI 的 el-button 组件上实现路由跳转,你可以使用 Vue Router 中提供的 router-link 或者编程式导航来实现。下面分别给出两种方法:

方法一:使用 router-link

<template>
  <div>
    <router-link to="/destination">
      <el-button type="primary">跳转到目标页面</el-button>
    </router-link>
  </div>
</template>

Vue

方法二:使用编程式导航

<template>
  <div>
    <el-button type="primary" @click="gotoDestination">跳转到目标页面</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoDestination() {
      // 使用编程式导航跳转到指定路由
      this.$router.push('/destination');
    }
  }
};
</script>

Vue

在这两种方法中,都会将 el-button 组件包裹在一个div或者其他容器元素内,以便在按钮的上层嵌套 router-link 或者添加 click 事件处理函数进行编程式导航。你可以根据实际情况选择合适的方法来实现跳转页面功能。

标签:
来源:

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有