锐客网

  1. 首页 > it技术 > >

vue跳转页面打开新窗口|vue跳转页面打开新窗口,并携带与接收参数方式

目录

  • 1、携带普通类型参数
  • 2、携带复杂类型参数
  • vue页面跳转并传参的八种方式
    • 方法一
    • 方法二
    • 方法三
    • 方法四
    • 方法五
    • 方法六
    • 方法七
    • 方法八

1、携带普通类型参数 字符串、数字等。
path：要跳转新页面的路由链接
query：要携带的参数
let pathInfo = this.$router.resolve({path:'/product_detail',query:{productId:'11'} }) window.open(pathInfo.href, '_blank');

新页面的参数接收：
this.productId = this.$route.query.productId


2、携带复杂类型参数 对象、数组等，通过JSON转换进行传递。
let pathInfo = this.$router.resolve({path:'/product_detail',query:{data:{name:'张三'}} }) window.open(pathInfo.href, '_blank');

新页面的参数接收：
console.log(this.$route.query.data)


vue页面跳转并传参的八种方式 我们知道，在vue中每个页面都需要在路由中声明，就是在router/index.js中写下面代码：
import Vue from 'vue'import Router from 'vue-router'import Test from "../components/Test"; Vue.use(Router)export default new Router({mode: 'history',routes: [{path: '/t',name: 'Test',component: Test,hidden:true},]})

实现页面跳转并传参有多种方式：

方法一
在template中可以使用标签实现跳转，跳转的路径是http://localhost:8080/t?index=id，如下：

只需要点击按钮就可以实现跳转，不需要写js代码，需要传递参数的话只需要/t?index=1即可，这样的话跳转的页面获取参数通过window.location.href能够获取到完整的url,然后截取参数。也可以通过下面代码获取参数
this.$route.query.index


方法二
跳转的路径是http://localhost:8080/t?index=id

其中需要注意，这里的to前面一定要加冒号，path的值要和上面路由定义的值一致，传参用query，里面是参数字典。
接收参数：
this.$route.query.index


方法三
【vue跳转页面打开新窗口|vue跳转页面打开新窗口,并携带与接收参数方式】命名路由的方式：
跳转的路径是http://localhost:8080/t?index=id

注意这里的name也要和router/index.js中声明的name值一致，并且传参使用params，和name配对的是params，和path配对的是query。
接收参数：
this.$route.params.index


方法四
跳转的路径是http://localhost:8080/t/id

这时的路由也需要更为为下面的形式：
routes: [{path: '/t/:index',name: 'Test',component: Test,hidden:true},]

接收参数：
this.$route.params.index


方法五
上面四种方法都是在html中实现的跳转，还有另外对应的在js中实现的跳转并传参的方法，代码如下：

接收参数依然使用
this.$route.query.index


方法六

接收参数依然使用
this.$route.query.index


方法七

接收参数依然使用
this.$route.query.index


方法八

接收参数依然使用
this.$route.params.index

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

    推荐阅读


    上一篇：技术·教程|Javascript中遇到的问题: 缓动动画函数的封装

    下一篇：SpringCloud项目的log4j2漏洞解决方案详解流程