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中的作用域scope介绍
Dec 28 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
May 08 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
Oct 24 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
js实现石头剪刀布游戏
Oct 11 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 xml-rpc远程调用
2008/12/19 PHP
PHP用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
PHP实现下载断点续传的方法
2014/11/12 PHP
基于PHP实现等比压缩图片大小
2016/03/04 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
jQuery的三种$()
2009/12/30 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
javascript实现获取浏览器版本、浏览器类型
2015/12/02 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery实现字符串全部替换的方法
2016/12/12 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
纯JS实现轮播图
2017/02/22 Javascript
jQuery在header中设置请求信息的方法
2017/03/06 Javascript
Bootstrap 响应式实用工具实例详解
2017/03/29 Javascript
解决AngualrJS页面刷新导致异常显示问题
2017/04/20 Javascript
vue-router配合ElementUI实现导航的实例
2018/02/11 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
2018/02/22 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
python一键升级所有pip package的方法
2017/01/16 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python 实现方阵的对角线遍历示例
2019/11/29 Python
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
服装厂厂长职责
2013/12/16 职场文书
问卷调查计划书
2014/01/10 职场文书
幼儿园教师节演讲稿
2014/09/03 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
2015年社区服务活动总结
2015/03/25 职场文书
Python访问Redis的详细操作
2021/06/26 Python