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 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
jQuery EasyUI API 中文文档 - Draggable 可拖拽
Sep 29 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
详解JS函数重载
Dec 04 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
webpack构建换肤功能的思路详解
Nov 27 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
详解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 进程锁定问题分析研究
2009/11/24 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
10条php编程小技巧
2015/07/07 PHP
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
小程序click-scroll组件设计
2019/06/18 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
Python中为feedparser设置超时时间避免堵塞
2014/09/28 Python
python中nan与inf转为特定数字方法示例
2017/05/11 Python
Python探索之pLSA实现代码
2017/10/25 Python
python批量替换页眉页脚实例代码
2018/01/22 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
简单了解Python字典copy与赋值的区别
2020/09/16 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
CSS3属性box-shadow使用详细教程
2012/01/21 HTML / CSS
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
造价工程师个人求职信
2013/09/21 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
财务工作检讨书
2014/10/29 职场文书
小学班主任事迹材料
2014/12/17 职场文书
合同纠纷调解书
2015/05/20 职场文书
Python 内置函数速查表一览
2021/06/02 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
Python matplotlib绘制雷达图
2022/04/13 Python