<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          vue使用路由進行頁面跳轉時傳遞參數

          2019-12-10    前端達人

          一. 通過router-link進行跳轉

          <router-link

          :to="{

          path: 'yourPath',

              params: {

              name: 'name',

                  dataObj: data

          },

          query: {

              name: 'name',

                  dataObj: data

          }

          }">

          </router-link>

          二. 通過編程導航 $router進行路由跳轉

          1.路徑后拼接參數

          通過路徑后直接拼接來傳遞參數



          getDescribe(id) {

          // 直接調用$router.push 實現攜帶參數的跳轉

                  this.$router.push({

                    path: /describe/${id},

                  })



          對應路由配置

          注意:此方法需要修改對應路由配置,需要在path中添加/:id來對應 $router.push 中path攜帶的參數。



           {

               path: '/describe/:id',

               name: 'Describe',

               component: Describe

             }



          獲取傳遞的參數值



          this.$route.params.id

          1. 通過params來傳遞參數

            傳遞參數

            通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數。



             this.$router.push({

                      name: 'Describe',

                      params: {

                        id: id

                      }

                    })



            對應路由配置

            注意這里不能使用:/id來傳遞參數了,因為已經使用params來攜帶參數了。



            {

                 path: '/describe',

                 name: 'Describe',

                 component: Describe

               }



            獲取參數



            this.$route.params.id

            1
          2. 通過query來傳遞參數

            傳遞參數

            使用path來匹配路由,然后通過query來傳遞參數

            這種情況下 query傳遞的參數會顯示在url后面?id=?



            this.$router.push({

                      path: '/describe',

                      query: {

                        id: id

                      }

                    })



            對應路由配置



             {

                 path: '/describe',

                 name: 'Describe',

                 component: Describe

               }



            獲取參數



            this.$route.query.id




          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合