• 技术文章 >web前端 >Vue.js

    vue路由传值的几种方式是什么

    青灯夜游青灯夜游2021-09-14 11:52:31原创115

    vue路由传值的方式:1、利用“router-link”路由导航来传递;2、调用“$router.push”实现路由传参数值;3、通过路由属性中的name匹配路由,再根据params传递参数值;4、通过query来传递参数值。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    vue路由传参值的方法

    一、router-link路由导航

    父组件: 使用<router-link to = "/跳转路径/传入的参数"></router-link>

    例如:<router-link to="/a/123">routerlink传参</router-link>

    子组件: this.$route.params.num接收父组件传递过来的参数

    mounted () {
      this.num = this.$route.params.num
    }

    路由配置:{path: '/a/:num', name: A, component: A}

    地址栏中的显示:http://localhost:8080/#/a/123

    二、调用$router.push实现路由传参

    父组件: 绑定点击事件,编写跳转代码

    <button @click="deliverParams(123)">push传参</button>
      methods: {
        deliverParams (id) {
          this.$router.push({
            path: `/d/${id}`
          })
        }
      }

    子组件: this.$route.params.id接收父组件传递过来的参数

    mounted () {
      this.id = this.$route.params.id
    }

    路由配置:{path: '/d/:id', name: D, component: D}

    地址栏中的显示:http://localhost:8080/#/d/123

    三、通过路由属性中的name匹配路由,再根据params传递参数

    父组件: 匹配路由配置好的属性名

    <button @click="deliverByName()">params传参</button>
        deliverByName () {
          this.$router.push({
            name: 'B',
            params: {
              sometext: '一只羊出没'
            }
          })
        }

    子组件:

    <template>
      <div id="b">
        This is page B!
        <p>传入参数:{{this.$route.params.sometext}}</p>
      </div>
    </template>

    路由配置: 路径后面不需要再加传入的参数,但是name必须和父组件中的name一致
    {path: '/b', name: 'B', component: B}

    地址栏中的显示: 可以看出地址栏不会带有传入的参数,且再次刷新页面后参数会丢失
    http://localhost:8080/#/b

    四、通过query来传递参数

    父组件:

    <button @click="deliverQuery()">query传参</button>
        deliverQuery () {
          this.$router.push({
            path: '/c',
            query: {
              sometext: '这是小羊同学'
            }
          })
        }

    子组件:

    <template>
      <div id="C">
        This is page C!
        <p>这是父组件传入的数据: {{this.$route.query.sometext}}</p>
      </div>
    </template>

    路由配置: 不需要做任何修改
    {path: '/c', name: 'C', component: C}

    地址栏中的显示: (中文做了转码)
    http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6

    相关推荐:《vue.js教程

    以上就是vue路由传值的几种方式是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:怎么在vscode上运行vue项目 下一篇:vuejs如何绑定函数
    线上培训班

    相关文章推荐

    • vuejs和bootstrap的区别是什么• element ui和vuejs的区别是什么• vuejs的生命周期是什么• 分享一个​Laravel Mix编译Vue踩坑记录• 如何运行别人的vue项目

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网