zoukankan      html  css  js  c++  java
  • 《VUE》vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功。

    在vue路由中,支持三种传参方式。

    场景:点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容。

    第一种

    <li v-for="item in list" @click="getDes(item.id)"></li>
    getDet(id) {
    // 直接调用$router.push 实现携带参数的跳转
       this.$router.push({
          path: `/noticeDetails/${id}`,
       })
    }
    // 方案一,需要对应路由配置如下:
       {
         path: '/noticeDetails/:id',
         name: 'NoticeDetails',
         component: NoticeDetails
       }
    // 很显然,需要在path中添加/:id来对应 $router.push 中path携带的参数。
    
    // 在子组件中可以使用来获取传递的参数值。
    this.$route.params.id

    第二种

    // 父组件中:通过路由属性中的name来确定匹配的路由,通过params来传递参数。
           this.$router.push({
              name: 'noticeDetails',
              params: {
                id: id
              }
            })
    
    // 对应路由配置: 注意这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。
       {
         path: '/noticeDetails',
         name: 'NoticeDetails',
         component: NoticeDetails
       }
    
    //子组件中: 这样来获取参数
    this.$route.params.id

    第三种

    // 父组件:使用path来匹配路由,然后通过query来传递参数
    这种情况下 query传递的参数会显示在url后面?id=this.$router.push({
              path: '/noticeDetails',
              query: {
                id: id
              }
            })
    
    // 对应路由配置:
       {
         path: '/noticeDetails',
         name: 'NoticeDetails',  //可写可不写
         component: NoticeDetails
       }
    
    // 对应子组件: 这样来获取参数
    this.$route.query.id
    
    // 这里要特别注意 在子组件中 获取参数的时候是this.$route.params 而不是 this.$router 这很重要

     

  • 相关阅读:
    map映射的用法
    相似的字串(hash+二分)
    进制 /字符串 hash
    CF#632 C.Eugene and an array
    2020牛客寒假算法基础集训营6 H-云
    Educational Codeforces Round 80 (Div. 2)
    Codeforces Round #601 (Div. 2)补题
    luogu-单调队列/单调栈专题
    Comet OJ
    Comet OJ
  • 原文地址:https://www.cnblogs.com/chensv/p/11607802.html
Copyright © 2011-2022 走看看