vue route新窗口跳转页面并且携带与接收参数


Posted in Vue.js onApril 10, 2022

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中可以使用<router-link>标签实现跳转,跳转的路径是http://localhost:8080/t?index=id,如下:

<router-link to="/t?index=1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

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

this.$route.query.index

方法二

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

<router-link :to="{path:'/t',query: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

其中需要注意,这里的to前面一定要加冒号,path的值要和上面路由定义的值一致,传参用query,里面是参数字典。

接收参数:

this.$route.query.index

方法三

命名路由的方式:

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

<router-link :to="{name:'Test',params: {index: 1}}">
     <button class="btn btn-default">点击跳转</button>
</router-link>

注意这里的name也要和router/index.js中声明的name值一致,并且传参使用params,和name配对的是params,和path配对的是query。

接收参数:

this.$route.params.index

方法四

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

<router-link:to="'/test/'+1">
     <button class="btn btn-default">点击跳转</button>
</router-link>

这时的路由也需要更为为下面的形式:

routes: [
          {
              path: '/t/:index',
              name: 'Test',
              component: Test,
              hidden:true
            },
        ]

接收参数:

this.$route.params.index

方法五

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

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t?index=1'});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法六

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t',query:{ index:'1'}});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法七

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({path: '/t/index'});
            }
        }
    }
</script>

接收参数依然使用

this.$route.query.index

方法八

<template>
<button @click = "func()">跳转</button>
</template>
<script>
    export default{
        methods:{
            func (){
                this.$router.push({name: 'Test',params:{ index:'1'}});
            }
        }
    }
</script>

接收参数依然使用

this.$route.params.index

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue+iview实现分页及查询功能
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
vue中activated的用法
Jan 03 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
Vue自定义铃声提示音组件的实现
Jan 22 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
vue里使用create, mounted调用方法
Apr 26 Vue.js
vue @ ~ 相对路径 路径别名设置方式
Jun 05 Vue.js
vue实力踩坑之push当前页无效
Apr 10 #Vue.js
vue实现Toast组件轻提示
Apr 10 #Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
vue判断按钮是否可以点击
Apr 09 #Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 #Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 #Vue.js
vue实现列表垂直无缝滚动
Apr 08 #Vue.js
You might like
BBS(php &amp; mysql)完整版(八)
2006/10/09 PHP
php 购物车的例子
2009/05/04 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
我见过最全的个人js加解密功能页面
2007/12/12 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jq选项卡鼠标延迟的插件实例
2013/05/13 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
2016/12/20 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[01:04:01]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第一场
2014/05/24 DOTA
python 调用c语言函数的方法
2017/09/29 Python
pandas带有重复索引操作方法
2018/06/08 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python3实现从排序数组中删除重复项算法分析
2019/04/03 Python
Python 最强编辑器详细使用指南(PyCharm )
2019/09/16 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
泰国网上购物:Shopee泰国
2018/09/14 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
大学生个人自荐信样本
2014/03/02 职场文书
詹天佑教学反思
2014/04/30 职场文书
万能检讨书
2015/01/27 职场文书
国际贸易实训总结
2015/08/03 职场文书
Oracle中DBLink的详细介绍
2022/04/29 Oracle
windows系统搭建WEB服务器详细教程
2022/08/05 Servers