<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 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.skdbbs.com

    存檔

    主站蜘蛛池模板: 四虎最新永久在线精品免费| 国产精品永久久久久久久久久| 精品多毛少妇人妻AV免费久久| 亚洲日韩国产AV无码无码精品 | 日韩一区精品视频一区二区| 国产A∨免费精品视频| 国产亚洲欧美精品久久久| 亚洲av无码成人精品区| 午夜影视日本亚洲欧洲精品一区| 中文字幕精品亚洲无线码二区| 国产精品视频免费一区二区| 精品一区二区三区免费| 久久国产乱子伦免费精品| 久久精品国产亚洲AV无码麻豆| 国产叼嘿久久精品久久| 国产精品视频久久| 国产成人精品高清不卡在线| 99久久这里只有精品| 久久精品国产亚洲AV麻豆网站 | 亚洲欧美日韩国产精品影院| 国产精品片在线观看手机版| 日韩经典精品无码一区| 国产精品内射久久久久欢欢| 日韩欧美精品不卡| 国产成人久久精品一区二区三区 | 三级高清精品国产| 精品福利一区二区三区精品国产第一国产综合精品 | 久久精品国产亚洲沈樵| 国内精品久久久久久中文字幕| 国产精品莉莉欧美自在线线| 国产中老年妇女精品| 久久婷婷国产综合精品| 久久精品蜜芽亚洲国产AV| 四虎成人精品无码| 亚洲AV午夜福利精品一区二区| 亚洲欧洲美洲无码精品VA| 亚洲午夜福利精品久久| 亚洲精品无码MV在线观看| 亚洲精品乱码久久久久久| 亚洲AV永久无码精品| 欧美精品中文字幕亚洲专区|