参考上一章
路由组件(Detail是如何读取出来别人传递给它的参数的
如果我传递的是6个参数，你怎么呈现?
解决一直出现$router.params问题
我想把模板里面的这个问题解决，用计算属性的话，值一多反而变得更复杂
要想读得更简单一点，不写重复得东西?
你可以借助路由里的全新配置项:
props
组件的props
我们学过组件的props:是用来接收外部进来的东西。怎么传?
<组件名 要传的props名=??? />
你只能这么写，另一个组件的props才能接收有三种接收方式
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28//简单声明接收 props:["name","age","sex"] //接收的同时对数据进行类型限制 props:{ name:{ type:String, age:Number, sex:String } } //接收的同时对数据:进行类型限制+默认的指定+必要性的设置 props:{ name:{ type:String, required:true,//设置name是必要的 }, age:{ type: Number, aefault:1,//默认值设为1 }, sex:{ type:String, required:true } }
组件的props详情请看这。 用来接收外部传给组件的东西
路由的props
打开src > router > index.js
谁接收东西,你就上谁那写配置去
路由的props第一种写法
我这里是Detil是接收数据的，所以:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22new VueRouter({ routes:[ .... { ... children:[ { name: 'xiangqing', path:"detil/:id/:name", component: Detil, //值有三种写法，第一种写一个对象 //路由props的第一种写法,该对象中的key-value都会以props的形式传给当前路由属性(这里是Detail) props:{ a:1,b:'hello' }, } ] } ] })
那你得知道这个对象到哪去了？
该对象中的key-value都会以props的形式传给当前路由属性(这里是Detail)
Detail.vue
复制代码
1
2
3
4
5
6export default{ name:'Detail', props:['a','b'], .... }
查看:
复制代码
1
2
3<li>a:{{a}}</li> <li>b:{{b}}</li>
访问:
复制代码
1
2http://localhost:8080/#/
效果已经出来了
但是我们这个用的少。 因为传递的是死数据
路由的props第二种写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18new VueRouter({ routes:[ .... { ... children:[ { name: 'xiangqing', path:"detil/:id/:name", component: Detil, //路由props的第二种写法,值是布尔值;若值为true，就会把收到的所有params参数,以props的形式传给当前路由组件(这里是Detail组件) props: true } ] } ] })
就意味着收到params的id和name都会以props的形式传给组件Detail:
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24<template> <div> <ul> <li>消息编号:{{id}}</li> <li>消息的名字:{{name}}</li> </ul> </div> </template> <script> export default { name: 'Detail', components:{}, props:['id','name'], mounted(){ //console.log(this.$route)//$route能够得到这个路由配置的相关信息 } } </script> <style scoped> </style>
但是它这个也不是尽善尽美，比如:它是不能接收query和其他参数
所以:
路由的props第三种写法
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21//路由props的第三种写法,值为函数 new VueRouter({ routes:[ .... { ... children:[ { name: 'xiangqing', path:"detil/:id/:name", component: Detil, //路由props的第三种写法,值为函数;同样会以props形式传给当前路由组件(这里是Detail) props(){ return {id:666,name: '你好'} } } ] } ] })
返回值必须是一个对象
设计成函数是有原因的。 去哪里能拿到这个id?
你肯定要找这个人
$route那就在
props()里面接收一下就可以了复制代码1
2
3
4
5props($route){//回调函数 return {id:$route.params.id,//或者$route.query.id。看你定义那种发送数据 name: $route.params.name} }
你在里面可以结构赋值{}
复制代码
1
2
3
4props({params}){ return {id:params.id,name: params.name} }
或者:
复制代码
1
2
3
4
5props({params:{id,name}}){//这种写法虽然简单，但是语义化十分不明确，不推荐 //return {id: id,name: name} return {id,name} }
最后
以上就是甜美大地最近收集整理的关于Vue2.0 Vue路由路由的props属性配置项的全部内容，更多相关Vue2.0内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复