vue3 setup点击跳转页面的实现示例

 更新时间:2023年10月26日 10:07:36   作者:ZYJ~  
本文主要介绍了vue3 setup点击跳转页面的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

1、push跳转

1.1、params传参,动态传参,数据会显示在地址栏中,且刷新页面不会消失

router.push({
    name: "MarineSpecialAddOrUpdate", //跳转的组件名字
    params: { //参数
      id: id,
      activeNames: "composition"
    }
  })

1.2、query传参,传递的参数会显示在地址栏中

router.push({
    path: "/business/marineSpecialAddOrUpdate",//跳转的路径
    query: { //参数
      id: id,
      activeNames: "composition"
    }
  })

2、点击跳转后打开一个新窗口

  const {href} =  router.resolve({
    name:'MarineSpecialAddOrUpdate',//跳转的组件名字
    params: {
      id: id,
    },
  });
  window.open(href, "_blank");

  const {href} =  router.resolve({
    path:'/business/MarineSpecialAddOrUpdate',//跳转路径
    query: {
      id: id,
    },
  });
  window.open(href, "_blank");

 到此这篇关于vue3 setup点击跳转页面的实现示例的文章就介绍到这了,更多相关vue3 setup点击跳转页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue+element-ui+axios实现图片上传

    vue+element-ui+axios实现图片上传

    这篇文章主要为大家详细介绍了vue+element-ui+axios实现图片上传,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • Vue实现五子棋小游戏

    Vue实现五子棋小游戏

    这篇文章主要为大家详细介绍了Vue实现五子棋小游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • Vue.$set 失效的坑 问题发现及解决方案

    Vue.$set 失效的坑 问题发现及解决方案

    这篇文章主要介绍了Vue.$set 失效的坑 问题发现及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-07-07
  • 解析vue的provide和inject使用方法及其原理

    解析vue的provide和inject使用方法及其原理

    这篇文章主要介绍了vue的provide和inject使用方法及其原理,本文通过源码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • 详解Vue项目的打包方式(生成dist文件)

    详解Vue项目的打包方式(生成dist文件)

    本文主要介绍了详解Vue项目的打包方式(生成dist文件),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • vue项目部署跨域问题的详细解决过程

    vue项目部署跨域问题的详细解决过程

    一般我们的前端Vue项目中都会涉及到跨域的问题,下面这篇文章主要给大家介绍了关于vue项目部署跨域问题的详细解决过程,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Pinia入门学习之实现简单的用户状态管理

    Pinia入门学习之实现简单的用户状态管理

    Vue3虽然相对于Vue2很多东西都变了,但是核心的东西还是没有变,比如说状态管理、路由等,再Vue3中尤大神推荐我们使用pinia来实现状态管理,他也说pinia就是Vuex的新版本,这篇文章主要给大家介绍了关于Pinia入门学习之实现简单的用户状态管理的相关资料,需要的朋友可以参考下
    2022-11-11
  • axios的interceptors多次执行问题解决

    axios的interceptors多次执行问题解决

    这篇文章主要为大家介绍了axios中interceptors多次执行问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • Vue使用虚拟dom进行渲染view的方法

    Vue使用虚拟dom进行渲染view的方法

    这篇文章主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • vue项目中使用scss详细方法步骤

    vue项目中使用scss详细方法步骤

    这篇文章主要给大家介绍了关于vue项目中使用scss的详细方法步骤,scss是一种css预处理语言,定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性,让css更加简洁、适应性更强,可读性更佳,需要的朋友可以参考下
    2023-11-11

最新评论