vue跳转方式(打开新页面)及传参操作示例


Posted in Javascript onJanuary 26, 2020

本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下:

1. router-link跳转

// 直接写上跳转的地址
<router-link to="/detail/one">
  <span class="spanfour" >link跳转</span>
</router-link>
// 添加参数
<router-link :to="{path:'/detail/two', query:{id:1,name:'vue'}}">
</router-link>
// 参数获取
id = this.$route.query.id
// 新窗口打开
<router-link :to="{path:'/detail/three', query:{id:1,name:'vue'}}" target="_blank">
</router-link>

2. this.$router.push跳转

toDeail (e) {
  this.$router.push({path: "/detail", query: {id: e}})
}
// 参数获取
id = this.$route.query.id
toDeail (e) {
  this.$router.push({name: "/detail", params: {id: e}})
}
// 注意地址需写在 name后面
//参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示
id = this.$route.params.id

3. this.$router.replace跳转

//和push的区别,push有记录一个history,replace没有
toDeail (e) {
  this.$router.replace({name: '/detail', params: {id: e}})
}

4. resolve跳转

//resolve页面跳转可用新页面打开
//2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https://segmentfault.com/q/1010000009557100下的一个回答)
toDeail (e) {
  const new = this.$router.resolve({name: '/detail', params: {id: e}})
  window.open(new.href,'_blank')
}

接收方怎么接收参数 this.$route.query.seridthis.$route.params.setid,以下举一个接收的例子

注意接收参数时是 $route 不是 $router

<template>
  <div>
    testDemo{{this.$route.query.setid}}
  </div>
</template>

接收的参数:

<template>
  <div>userlist--{{mallCode}} </div>
</template>
<script>
 export default {
  name: "UserList",
  date:function(){
   return {"mallCode":mallCode}
  },
  created(){
   this.getParams()
  },
  methods:{
   getParams() {
    // 取到路由带过来的参数
    const routerParams = this.$route.query.mallCode;
    this.mallCode = routerParams;
    console.log(this.$route.query);
    // 将数据放在当前组件的数据内
    //this.mallInfo.searchMap.mallCode = routerParams;
    //this.keyupMallName()
   }
  }
 }
</script>
<style scoped>
</style>

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
Jul 15 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
IE中的File域无法清空使用jQuery重设File域
Apr 24 Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
vue如何使用 Slot 分发内容实例详解
Sep 05 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
Vue项目打包编译优化方案
Sep 16 Javascript
详解Vue的ref特性的使用
Jan 24 #Javascript
JavaScript对象原型链原理解析
Jan 22 #Javascript
Node.js学习之内置模块fs用法示例
Jan 22 #Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 #Javascript
ES6学习笔记之let与const用法实例分析
Jan 22 #Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 #Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 #Javascript
You might like
PHP连接SQLServer2005 的问题解决方法
2010/07/19 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
jq给页面添加覆盖层遮罩的实例
2017/02/16 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
微信小程序中this.data与this.setData的区别详解
2018/09/17 Javascript
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
Python简单实现socket信息发送与监听功能示例
2018/01/03 Python
浅谈利用numpy对矩阵进行归一化处理的方法
2018/07/11 Python
Python爬取成语接龙类网站
2018/10/19 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
Java软件工程师综合面试题笔试题
2013/09/08 面试题
生产主管岗位职责
2013/11/10 职场文书
致1500米运动员广播稿
2014/02/07 职场文书
保安岗位职责
2014/02/21 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
宣传稿格式范文
2015/07/23 职场文书
2016年习主席讲话学习心得体会
2016/01/20 职场文书
《我们的民族小学》教学反思
2016/02/19 职场文书
php 原生分页
2021/04/01 PHP
python实现监听键盘
2021/04/26 Python
JavaScript控制台的更多功能
2021/04/28 Javascript
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript