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实现文本框鼠标右击无效以及不能输入的代码
Nov 05 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
Apr 29 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
微信小程序 button样式设置为图片的方法
Jun 19 Javascript
移动端JS实现拖拽两种方法解析
Oct 12 Javascript
element多个表单校验的实现
May 27 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
ThinkPHP中Session用法详解
2014/11/29 PHP
php实现两个数组相加的方法
2015/02/17 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
ThinkPHP实现生成和校验验证码功能
2017/04/28 PHP
Laravel中批量赋值Mass-Assignment的真正含义详解
2017/09/29 PHP
PHP设计模式之状态模式定义与用法详解
2018/04/02 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
PHP ob缓存以及ob函数原理实例解析
2020/11/13 PHP
教你如何解密js/vbs/vbscript加密的编码异处理小结
2008/06/25 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
webpack 4.0.0-beta.0版本新特性介绍
2018/02/10 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python中ASCII码字符与int之间的转换方法
2018/07/09 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
python 串口读取+存储+输出处理实例
2019/12/26 Python
python实现的分层随机抽样案例
2020/02/25 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
母亲节演讲稿范文
2014/01/02 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
体育运动会广播稿
2014/10/05 职场文书
行政助理岗位职责
2015/02/10 职场文书
新生开学寄语大全
2015/05/28 职场文书
frg-100简单操作(设置)说明
2022/04/05 无线电