zoukankan      html  css  js  c++  java
  • Vue.js笔记(五) 路由传参的三种方式

    现有如下场景,点击父组件的button元素跳转到子组件中,并携带参数,便于子组件获取数据。

     <button  @click="handleChangePage(data.id)">预定</button>
    

    方案一:

        handleChangePage (id) {
          this.$router.push(`/detail/${id}`)
        }
    

    方案一,需要对应路由配置如下:

        {
          path: '/detail/:id',
          component: Detail
        }
    

    很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

    this.$route.params.id
    

    方案二:

    父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。

        handleChangePage (id) {
          this.$router.push({
            name: 'Detail',
            params: {
              id: id
            }
          })
        }
    

    对应路由配置: 这里可以添加:/id 也可以不添加,不添加数据会在url后面显示,不添加数据就不会显示

        {
          path: '/detail',
          name: 'Detail',
          component: Detail
        }
    

    子组件中: 这样来获取参数

    this.$route.params.id
    

    方案三

    父组件:使用path来匹配路由,然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=?

        this.$router.push({
              path: '/detail',
              query: {
                id: id
              }
            })
    

    对应路由配置:

       {
         path: '/detail',
         name: 'Detail',
         component: Detail
       }
    

    对应子组件: 这样来获取参数

    this.$route.query.id
    

    注意 在子组件中 获取参数的时候是route而不是router

  • 相关阅读:
    爬虫学习笔记(二)http请求详解
    学习自动化的正确姿势
    binascii模块
    python一些内置函数及方法
    C小点,随便记记
    C:<conio.h>
    C,动态数组
    php intval()函数漏洞,is_numeric() 漏洞,绕过回文判断
    Mp3stego使用,附题,实验吧misc-Canon
    原生js实现Ajax
  • 原文地址:https://www.cnblogs.com/cpaulyz/p/12487222.html
Copyright © 2011-2022 走看看