专栏首页pangguomingvue路由跳转传参数

vue路由跳转传参数

<router-link 
    :to="{
        path: 'yourPath', 
        params: { 
            name: 'name', 
            dataObj: data
        },
        query: {
            name: 'name', 
            dataObj: data
        }
    }">
</router-link>

 1. path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
 2. params -> 是要传送的参数,参数可以直接key:value形式传递
 3. query -> 是通过 url 来传递参数的同样是key:value形式传递

 // 2,3两点皆可传递
2. $router方式跳转
// 组件 a
<template>
    <button @click="sendParams">传递</button>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        msg: 'test message'
      }
    },
    methods: {
      sendParams () {
        this.$router.push({
            path: 'yourPath', 
            name: '要跳转的路径的 name,在 router 文件夹下的 index.js 文件内找',
            params: { 
                name: 'name', 
                dataObj: this.msg
            }
            /*query: {
                name: 'name', 
                dataObj: this.msg
            }*/
        })
      }
    },
    computed: {

    },
    mounted () {

    }
  }
</script>
<style scoped></style>
----------------------------------------
// 组件b
<template>
    <h3>msg</h3>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        msg: ''
      }
    },
    methods: {
      getParams () {
        // 取到路由带过来的参数 
        let routerParams = this.$route.params.dataobj
        // 将数据放在当前组件的数据内
        this.msg = routerParams
      }
    },
    watch: {
    // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
      '$route': 'getParams'
    }
  }
</script>
<style scoped></style>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 把表单转成json,并且name为key,value为值

    http://jsfiddle.net/sxGtM/3/ http://stackoverflow.com/questions/1184624/convert-...

    庞小明
  • angularJS constant和value

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是:都可以接受两个参数,...

    庞小明
  • 流媒体Red5服务自定义媒体文件路径

    使用bean对自己的项目进行配置,更换默认的视频播放目录和视频录制目录.在0.6版的时候,

    庞小明
  • 使用ES6新特性开发微信小程序(3)——类

    Class(类) Class是ES6引入的最重要特性之一。在没有Class之前,我们只能通过原型链来模拟类。 Class Definition(类的定义) cl...

    极乐君
  • C语言学习笔记之字符串拼接的2种方法——strcat、sprintf

    Theo Tsao
  • 27.python __name__ == ‘__main__’详细解释

    学习过C语言或者Java语言的盆友应该都知道程序运行必然有主程序入口main函数,而python却不同,即便没有主程序入口,程序一样可以自上而下对代码块依次运行...

    猿说编程[Python和C]
  • 私有云中Kubernetes Clu

    Kubernetes Master HA架构图 ? 配置与说明 所有组件可以通过kubelet static pod的方式启动和管理,由kubelet st...

    Walton
  • python __name__ == ‘__main__’详细解释

    学习过C语言或者Java语言的盆友应该都知道程序运行必然有主程序入口main函数,而python却不同,即便没有主程序入口,程序一样可以自上而下对代码块依次运行...

    猿说编程[Python和C]
  • 【小家Spring】分享Spring中一个小巧而优雅的类SimpleAliasRegistry源码分析(别名注册、管理器)

    上一篇分享了:【小家Spring】一文读懂Spring中的BeanFactory和FactoryBean的区别。为了缓解疲劳,本文来个小插曲~~不用费太多脑力的

    YourBatman
  • 不要再问我 Python2 和 Python3 的 Unicode 问题啦!

    字符编码问题几乎是会跟随我们整个编程生涯的一大魔障,一不小心各种玄学的问题就会接踵而至,防不胜防,尤其是对初学者来说,碰到编码问题简直是就是加快了踏上从入门到放...

    Rocky0429

扫码关注云+社区

领取腾讯云代金券