Vue2.0 Vue路由路由的props属性配置项

参考上一章

路由组件(Detail是如何读取出来别人传递给它的参数的

如果我传递的是6个参数，你怎么呈现?

解决一直出现$router.params问题

我想把模板里面的这个问题解决，用计算属性的话，值一多反而变得更复杂

要想读得更简单一点，不写重复得东西?

你可以借助路由里的全新配置项:props

组件的props

我们学过组件的props:是用来接收外部进来的东西。怎么传?

<组件名 要传的props名=??? />

你只能这么写，另一个组件的props才能接收有三种接收方式

//简单声明接收
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是接收数据的，所以:

new 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

export default{
    name:'Detail',
    props:['a','b'],
    ....
}

查看:

<li>a:{{a}}</li>
<li>b:{{b}}</li>

访问:

http://localhost:8080/#/

效果已经出来了

但是我们这个用的少。 因为传递的是死数据

路由的props第二种写法

new VueRouter({
    routes:[
        ....
        {
        	...
        	children:[
        		{
                	name: 'xiangqing',
                	path:"detil/:id/:name",
                	component: Detil,
        			//路由props的第二种写法,值是布尔值;若值为true，就会把收到的所有params参数,以props的形式传给当前路由组件(这里是Detail组件)
        			props: true
                 }
    		]
        }
    ]
})

就意味着收到params的id和name都会以props的形式传给组件Detail:

<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第三种写法

//路由props的第三种写法,值为函数
new VueRouter({
    routes:[
        ....
        {
        	...
        	children:[
        		{
                	name: 'xiangqing',
                	path:"detil/:id/:name",
                	component: Detil,
        			//路由props的第三种写法,值为函数;同样会以props形式传给当前路由组件(这里是Detail)
        			props(){
    					return {id:666,name: '你好'}
					}
                 }
    		]
        }
    ]
})

返回值必须是一个对象

设计成函数是有原因的。 去哪里能拿到这个id?

你肯定要找这个人$route

那就在props()里面接收一下就可以了

props($route){//回调函数
    return {id:$route.params.id,//或者$route.query.id。看你定义那种发送数据
            name: $route.params.name}
}

你在里面可以结构赋值{}

props({params}){
    return {id:params.id,name: params.name}
}

或者:

props({params:{id,name}}){//这种写法虽然简单，但是语义化十分不明确，不推荐
    //return {id: id,name: name}
    return {id,name}
}