vue 基于elementUI/antd-vue, h函数实现message中嵌套链接跳转到指定路由 (h函数点击事件的写法)

15 篇文章 1 订阅
8 篇文章 1 订阅

效果如图:

点击message 组件中的 工单管理, 跳转到工单管理页面。

以下是基于vue3 + antd-vue

代码如下:

import { message } from 'ant-design-vue';
import { h, reactive, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const showSuccessMessage = () => {
  message.success(() =>
    h('span', {}, [
      '提交成功,请到',
      h(
        'span',
        {
          style: {
            color: '#4BB1E9',
            cursor: 'pointer'
          },
          onClick() {
            goWorkOrder();
          }
        },
        ' 工单管理 '
      ),
      '中及时关注工单状态!'
    ])
  );
};

// 去工单管理
const goWorkOrder = () => {
  router.push('/operations/workManagement/devicePowerOff');
};

点击事件直接用onClick即可。

  • 6
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,可以非常方便的实现单页面应用程序的路由功能。 Vue Router 提供了以下两种方式实现页面路由跳转: 1. 声明式导航:通过 `<router-link>` 组件实现页面跳转,该组件会被渲染成一个 `<a>` 标签,点击该标签后会触发路由跳转。 2. 编程式导航:通过 `$router` 对象提供的方法实现页面跳转,例如 `$router.push()`、`$router.replace()`、`$router.go()` 等方法。 下面我们来看一个简单的示例,在 Vue Router 如何实现页面路由跳转: ```html <!-- 在模板使用 router-link 组件 --> <router-link to="/home">Home</router-link> <!-- 在组件使用 $router 对象实现编程式导航 --> <button @click="$router.push('/about')">About</button> ``` 在上面的示例,我们分别演示了如何使用 `<router-link>` 组件和 `$router` 对象实现页面路由跳转,其 `to` 属性表示跳转的目标路由地址。 此外,Vue Router 还支持路由嵌套的功能,可以通过嵌套路由的方式实现页面的嵌套展示。下面我们来看一个嵌套路由的示例: ```javascript const router = new VueRouter({ routes: [ { path: '/home', component: Home, children: [ { path: 'news', component: News }, { path: 'videos', component: Videos } ] } ] }) ``` 在上面的示例,我们定义了一个名为 `Home` 的路由组件,并在该组件嵌套了两个子路由 `News` 和 `Videos`,这样就可以实现在 `Home` 组件展示新闻和视频内容的功能。在实际开发,我们可以根据实际需求来定义不同的路由组件和子路由实现灵活的页面嵌套效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

snows_l

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值