vue使用路由進(jìn)行頁(yè)面跳轉(zhuǎn)時(shí)傳遞參數(shù)

2019-12-10    前端達(dá)人

一. 通過(guò)router-link進(jìn)行跳轉(zhuǎn)

<router-link

:to="{

path: 'yourPath',

    params: {

    name: 'name',

        dataObj: data

},

query: {

    name: 'name',

        dataObj: data

}

}">

</router-link>

二. 通過(guò)編程導(dǎo)航 $router進(jìn)行路由跳轉(zhuǎn)

1.路徑后拼接參數(shù)

通過(guò)路徑后直接拼接來(lái)傳遞參數(shù)



getDescribe(id) {

// 直接調(diào)用$router.push 實(shí)現(xiàn)攜帶參數(shù)的跳轉(zhuǎn)

        this.$router.push({

          path: /describe/${id},

        })



對(duì)應(yīng)路由配置

注意:此方法需要修改對(duì)應(yīng)路由配置,需要在path中添加/:id來(lái)對(duì)應(yīng) $router.push 中path攜帶的參數(shù)。



 {

     path: '/describe/:id',

     name: 'Describe',

     component: Describe

   }



獲取傳遞的參數(shù)值



this.$route.params.id

  1. 通過(guò)params來(lái)傳遞參數(shù)

    傳遞參數(shù)

    通過(guò)路由屬性中的name來(lái)確定匹配的路由，通過(guò)params來(lái)傳遞參數(shù)。



     this.$router.push({

              name: 'Describe',

              params: {

                id: id

              }

            })



    對(duì)應(yīng)路由配置

    注意這里不能使用:/id來(lái)傳遞參數(shù)了，因?yàn)橐呀?jīng)使用params來(lái)攜帶參數(shù)了。



    {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    獲取參數(shù)



    this.$route.params.id

    1
  2. 通過(guò)query來(lái)傳遞參數(shù)

    傳遞參數(shù)

    使用path來(lái)匹配路由，然后通過(guò)query來(lái)傳遞參數(shù)

    這種情況下 query傳遞的參數(shù)會(huì)顯示在url后面?id=？



    this.$router.push({

              path: '/describe',

              query: {

                id: id

              }

            })



    對(duì)應(yīng)路由配置



     {

         path: '/describe',

         name: 'Describe',

         component: Describe

       }



    獲取參數(shù)



    this.$route.query.id




日歷

鏈接

個(gè)人資料

存檔