vue的传参方式汇总和路由器使用技巧

　　


　　

　　

1,路由配置

　　 　　 　　{ 　　路径://描述:id, 　　名称:“描述”, 　　组件:描述 　　} 　　
　　 　　

2,使用方法

　　 　　//直接调用美元路由器。推动实现携带参数的跳转 　　美元。router.push ({//这个id是一个变量,随便是什么值都可以 　　路径:/描述/$ {id}”, 　　}) 　　 　　

3,获取方法(在描述页面)

　　 　　 　　美元route.params.id 　　 　　

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

　　


　　

　　

, 1路由配置

　　 　　 　　{ 　　路径:/描述, 　　名称:“描述”, 　　组件:描述 　　} 　　(这个地方默认配置就可以了,不用做任何的处理) 　　 　　

2,使用方法

　　 　　 　　美元。router.push ({ 　　名称:“描述”, 　　参数:{ 　　id: id 　　} 　　}) 　　 　　

父组件中:通过路由属性中的名字来确定匹配的路由,通过参数来传递参数。

　　

, 3,获取方法(在描述页面)

　　 　　 　　美元route.params.id 　　 　　

也用params获取就可以了;

　　


　　

　　

, 1路由配置

　　 　　 　　{ 　　路径:/描述, 　　名称:“描述”, 　　组件:描述 　　} 　　 　　

(默认配置)

　　

2,使用方法

　　 　　 　　美元。router.push ({ 　　路径:/描述, 　　查询:{ 　　id: id 　　} 　　}) 　　(params换成了查询) 　　 　　

, 3,获取方法(在描述页面)

　　 　　 　　美元route.query.id 　　 　　

(这个地方用查询还获取id,和前面用的params获取的区别在于,用查询获取的id值会在url中有显示,可以看到你传过来的值)

　　

　　

父组件 　　

(表数据这个地方可以随便取名字,不是特定的值)

　　 　　 　　& lt; div类=澳谌荨北?//这个是一个普通组件,其中tabelData可以是变量,也可以是常量,和pageInfo一样的样,这里打算传递两个值过去,其实也可以用对象的方式传过去都是可以的。 　　& lt;我的桌子:表数据=" https://www.yisu.com/zixun/tableData ":页面信息=" pageInfo " id=癿yTable”祝辞& lt;/my-table> 　　& lt;/div> 　　 　　

子组件 　　 　　 　　道具:“tableData”、“pageInfo”, 　　数据(){ 　　返回{ 　　tData: this.tableData, 　　页面:this.pageInfo 　　} 　　} 　　 　　

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

　　

　　

1, $ route.path

　　

类型:字符串

　　

字符串,对应当前路由的路径,总是解析为绝对路径,如“/foo/bar”。

　　

2美元route.params

　　

类型:对象

　　

一个键/值对象,包含了动态片段和全匹配片段,如果没有路由参数,就是一个空对象。

　　

3美元route.query

　　

类型:对象

　　

一个键/值对象,表示网址查询参数,例如,对于路径/foo # 63;用户=1,则有route.query美元。用户==1,如果没有查询参数,则是个空对象。

　　

4美元route.hash

　　

类型:字符串

　　

当前路由的散列值(带#),如果没有哈希值,则为空字符串。

　　

5美元route.fullPath

　　

类型:字符串

　　

完成解析后的URL,包含查询参数和散列的完整路径。

　　

详细请见(https://router.vuejs.org/zh-cn/api/route-object.html)

　　

　　

以上所述是小编给大家介绍的vue的传参方式和路由器使用技巧,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

vue的传参方式汇总和路由器使用技巧