vue的传参方式和router使用技巧

Bertha 。 2022-05-23 08:44 123阅读 0赞

## vue传参方法一 ##

https://www.cnblogs.com/luozhixiang/p/9072441.html

1，路由配置

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

2，使用方法

//   直接调用$router.push 实现携带参数的跳转
     this.$router.push({
         
    //  这个id是一个变量,随便是什么值都可以
        path: /describe/${id}`,
     })

3，获取方法（在describe页面）

$route.params.id

使用以上方法可以拿到上个页面传过来的id值

## vue传参方法二 ##

1，路由配置

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

（这个地方默认配置就可以了，不用做任何的处理）

2，使用方法

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

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

3，获取方法（在describe页面）

$route.params.id

也用params获取就可以了；

## vue传参方法三 ##

1，路由配置

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

（默认配置）

2，使用方法

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

（params换成了query）

3，获取方法（在describe页面）

$route.query.id

（这个地方用query还获取id，和前面用的params获取的区别在于，用query获取的id值会在url中有显示，可以看到你传过来的值）

## props传值方法 ##

### 父组件 ###

（table-data这个地方可以随便取名字，不是特定的值）

<div class="content">
    //这个是一个普通组件，其中tabelData可以是变量，也可以是常量，和pageInfo一样样，这里打算传递两个值过去，其实也可以用对象的方式传过去都是可以的。
        <my-table :table-data="tableData" :page-info="pageInfo" id="myTable"></my-table>
    </div>

### 子组件 ###

![复制代码][copycode.gif]

props: ['tableData', 'pageInfo'],
    data() {
        return {
            tData: this.tableData,
            page: this.pageInfo
        }
    }

![复制代码][copycode.gif]

prop是单向绑定的，不应该在子组件内部改变prop。不过这里的props传过来的值会随之父组件的值的改变而改变，是动态改变的。

## route使用小技巧</h2><pstyle="margin:10pxauto;color:rgb(0,0,0);font−family:Verdana,Arial,Helvetica,sans−serif;font−size:14px;text−align:left;background−color:rgb(238,238,238);">1，  r o u t e 使 用 小 技 巧 < / h 2 >< p s t y l e =" m a r g i n : 10 p x a u t o ; c o l o r : r g b ( 0 , 0 , 0 ) ; f o n t − f a m i l y : V e r d a n a , A r i a l , H e l v e t i c a , s a n s − s e r i f ; f o n t − s i z e : 14 p x ; t e x t − a l i g n : l e f t ; b a c k g r o u n d − c o l o r : r g b ( 238 , 238 , 238 ) ; "> 1 ， route.path  类型: `string`  字符串，对应当前路由的路径，总是解析为绝对路径，如 `"/foo/bar"`。  2，route.params</p><ul style="margin-bottom:0px;margin-left:30px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);"><li style="margin-top:0px;margin-bottom:1em;margin-left:0px;padding:0px;">类型:&nbsp;<code style="margin:0px;padding:0px;">Object</code></li></ul><p style="margin:10px auto;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);">　　一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。</p><p style="margin:10px auto;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);">3， route.params</p><ul style="margin-bottom:0px;margin-left:30px;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);"><li style="margin-top:0px;margin-bottom:1em;margin-left:0px;padding:0px;">类型:&nbsp;<code style="margin:0px;padding:0px;">Object</code></li></ul><p style="margin:10px auto;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);">　　一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。</p><p style="margin:10px auto;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);">3， route.query  类型: `Object`  一个 key/value 对象，表示 URL 查询参数。例如，对于路径 `/foo?user=1`，则有 `$route.query.user == 1</code>，如果没有查询参数，则是个空对象。</p></li></ul><p style="margin:10px auto;color:rgb(0,0,0);font-family:Verdana, Arial, Helvetica, sans-serif;font-size:14px;text-align:left;background-color:rgb(238,238,238);">4，$route.hash`  类型: `string`  当前路由的 hash 值 (带 `#`) ，如果没有 hash 值，则为空字符串。  5，$route.fullPath  类型: `string`  完成解析后的 URL，包含查询参数和 hash 的完整路径。     详细请见（https://router.vuejs.org/zh-cn/api/route-object.html） ##

</div>

[copycode.gif]: /images/20220523/c4e638badb084274a175d2d6df0bacce.png