vue跳转方式(打开新页面)及传参操作示例
2020-02-13 11:30
706 查看
本文实例讲述了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.serid
和this.$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程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- vue.js通过路由跳转页面的三种方式
- Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
- JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
- 几种链接总结:跳转,打开新页面,刷新当前页,不做任何操作
- vue-router--路由传参结合请求数据(页面底部按钮跳转功能实现参考)
- Vue 页面跳转方式 与 参数传递
- vue页面跳转拦截器 打开新页面
- vue-router实现几级页面跳转及传参
- vue-router判断页面未登录自动跳转到登录页的方法示例
- vue 获取后台数据id通过url传参,进行页面跳转
- 表单中打开页面的几种方式及传参形式
- (随笔记录)页面跳转以及传参的三种方式
- 表单中打开页面的几种方式及传参形式
- javascript - windows打开界面/跳转页面 几种方式和区别
- vue路由传参并跳转页面
- vue-spa-单页面应用跳转打开新的页面
- AngularJS页面带参跳转及参数解析操作示例
- 分享url带中文参数,打开html操作完毕跳转jsp页面中文乱码解决
- vue-router实现登录和跳转到指定页面,vue-router 传参
- Vue 路由跳转方式 和 路由跳转时传参