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将数据库中的TEXT类型数据动态赋值到TEXTAREA中
Apr 20 Javascript
利用js对象弹出一个层
Mar 26 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
JS脚本根据手机浏览器类型跳转WAP手机网站(两种方式)
Aug 04 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
Nov 16 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
用jquery获取自定义的标签属性的值简单实例
Sep 17 Javascript
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
May 20 Javascript
vue实现单一筛选、删除筛选条件
Oct 26 Javascript
JavaScript实现雪花飘落效果
Dec 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
php代码把全角数字转为半角数字
2007/12/10 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
jquery+ajax+C#实现无刷新操作数据库数据的简单实例
2014/02/08 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
详解如何使用webpack打包Vue工程
2017/05/27 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
vuex 中插件的编写案例解析
2019/06/10 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
2019/10/24 Javascript
vue界面发送表情的实现代码
2020/09/11 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
spyder常用快捷键(分享)
2017/07/19 Python
python学习必备知识汇总
2017/09/08 Python
如何卸载python插件
2020/07/08 Python
python的launcher用法知识点总结
2020/08/07 Python
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
Linux管理员面试经常问道的相关命令
2014/12/12 面试题
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
环保公益广告语
2014/03/13 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
小学班主任工作经验交流材料
2015/11/02 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Nginx四层负载均衡的配置指南
2021/06/11 Servers
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电
MySQL数据库如何查看表占用空间大小
2022/06/10 MySQL