zoukankan      html  css  js  c++  java
  • vue路由传参的三种基本方式

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

    <li v-for="article in articles" @click="getDescribe(article.id)">

    方案一:

    getDescribe(id) {
    //直接调用$router.push 实现携带参数的跳转
          this.$router.push({
          path: `/describe/${id}`,
    })

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

    {
         path: '/describe/:id',
         name: 'Describe',
         component: Describe
       }

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

    this.$route.params.id

    方案二:

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

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

    对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。

    {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

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

    this.$route.params.id

    方案三:

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

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

    对应路由配置:

    {
         path: '/describe',
         name: 'Describe',
         component: Describe
       }

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

    this.$route.query.id
  • 相关阅读:
    php操作zip压缩文件
    php图像处理(thinkphp框架有相对强大的图像处理功能)
    php实现希尔排序(总结)
    PHP glob() 函数详解
    php资源类型变量
    dump var_dump print print_r的区别
    php实现遍历文件目录
    php常用函数
    php全局变量的使用
    php函数按地址传递参数(php引用)
  • 原文地址:https://www.cnblogs.com/lemonmonster/p/10269695.html
Copyright © 2011-2022 走看看