首页 > 其他分享 >Vue路由新开页面跳转和传参传递

Vue路由新开页面跳转和传参传递

时间:2023-07-10 10:46:57浏览次数:32  
标签:传参 Vue routeUrl 跳转 id 路由

需求:在后台管理系统首页列表项中,点击详情跳转到系统中指定菜单的路由要求新开窗口并需要带上参数查询。

第一种方法:

1 const { id } = item;
2 let routeUrl = this.$router.resolve({
3     path: '/xxx',  // 路由地址
4     query: { id } // 参数信息
5 });
6 window.open(routeUrl.href, '_blank');

第二种方法:

 1 <router-link :to="{path:'/xxx', query:{id:1}}" target="_blank"> 2 </router-link> 

 鉴定完毕,欢迎友们一起交流学习!!

 

标签:传参,Vue,routeUrl,跳转,id,路由
From: https://www.cnblogs.com/liushihong21/p/17540175.html

相关文章

  • VUE中定义全局配置方法
    方法一:main.ts中constwsapi="ws://localhost:8081";constappConfig={wsapi,};constapp=createApp(App);//ProvidetheappConfigasaglobalpropertyapp.config.globalProperties.$appConfig=appConfig;app.use(store)VUE中1、setup方法中co......
  • vue实例
    <!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Vue测试实例</title><scriptsrc="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script></head><body><divid=......
  • vue--day13--watch与computed的区别
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>watch实现名字案例</title><scri......
  • vue--day12--深度监视
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>天气案例--监听属性</title><scrip......
  • vue-day12--监听属性
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>天气案例--监听属性</title><scrip......
  • vue--day11--计算属性实现名字案例简写
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>计算属性实现名字案例简写</title><scr......
  • vuex
    1.概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。2.何时使用?多个组件需要共享数据时3.搭建vuex环境1、创建文件:src/store/index.js//引入Vue核心库importVuefr......
  • vue--day11--计算属性实现名字案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>计算属性实现名字案例</title><scrip......
  • vue-day11--插值语法实现名字案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>插值语法实现名字案例</title><scrip......
  • vue-day11--methods实现名字案例
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>methods实现名字案例</title><sc......