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 插槽简介及使用示例
Nov 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
vue二选一tab栏切换新做法实现
Jan 19 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
vue 实现上传组件
May 31 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue 自定义组件添加原生事件
Apr 21 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
帖几个PHP的无限分类实现想法~
2007/01/02 PHP
PHP的简易冒泡法代码分享
2012/08/28 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
PHP API接口必备之输出json格式数据示例代码
2017/06/27 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
js实现二级菜单渐隐显示
2015/11/03 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
什么时候不能在 Node.js 中使用 Lock Files
2019/06/24 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Python的requests网络编程包使用教程
2016/07/11 Python
python和ruby,我选谁?
2017/09/13 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
阿里旅行:飞猪
2017/01/05 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
考博自荐信
2013/10/25 职场文书
晨会主持词
2014/03/17 职场文书
电子商务系毕业生自荐信
2014/05/29 职场文书
财务管理专业求职信
2014/06/11 职场文书
2014年监理个人工作总结
2014/12/11 职场文书
幼儿园大班开学寄语(2016秋季)
2015/12/03 职场文书
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android