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 相关文章推荐
Javascript 模式实例 观察者模式
Oct 24 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
学习javascript面向对象 javascript实现继承的方式
Jan 04 Javascript
详解Javascript中的Object对象
Feb 28 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
bootstrap的工具提示实例代码
May 17 Javascript
angular写一个列表的选择全选交互组件的示例
Jan 22 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
elementui的el-popover修改样式不生效的解决
Jun 30 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页码形式分页函数支持静态化地址及ajax分页
2014/03/28 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP缓冲区用法总结
2016/02/14 PHP
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
JS定时器实例
2013/04/17 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
VUE中的无限循环代码解析
2017/09/22 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
浅谈Postman解决token传参的问题
2018/03/31 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
详谈Object.defineProperty 及实现数据双向绑定
2020/07/18 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python实现自动网页截图并裁剪图片
2018/07/30 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
python中time、datetime模块的使用
2020/12/14 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
什么是索引指示器
2012/08/20 面试题
五年级科学教学反思
2014/02/05 职场文书
小学毕业感言300字
2014/02/19 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
2014年个人售房协议书
2014/10/30 职场文书
详解JAVA的控制语句
2021/11/11 Java/Android
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL
VUE递归树形实现多级列表
2022/07/15 Vue.js