Vue路由命名及props属性传参

Vue路由命名及props属性传参

一、路由命名

1.意义：给路由命名，简化路由的跳转

2.如何使用？

​ 在router的index.js中（路由配置文件）,给对应的路由添加name属性

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                     // 给路由命名,也就是将子路由/demo/test/welcome命名为hello // 给路由命名,也就是将子路由/demo/test/welcome命名为hello
        			name:'hello'
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}

路由跳转：

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		    参数
		}
	}"
>跳转</router-link>

二、props传参

1.意义：以属性的方式传参

2.params用法

​ 注意：路由携带params参数时，若使用to的对象写法，在这个对象中不能使用path配置项，必须使用name配置。

<!-- 跳转并携带params参数，to的字符串写法 ,注意："666/你好"是参数值，对应的路由配置加占位符-->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

​ 对应的路由配置：

{
	path:'/home',
	component:Home,
	children:[
		{
			component:Message,
			children:[
				{
                    name:'xiangqing',
                   // 使用占位符/:id/:title声明接收params参数
					path:'detail/:id/:title', 
					component:Detail
				}
			]
		}
	]
}

to的对象写法及params

<!-- 跳转并携带params参数，to的对象写法,不能使用path配置项，必须使用name配置。-->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
       	   title:'你好'
		}
	}">
    跳转
</router-link>

组件中接收参数：

$route.params.id
$route.params.title

3.props用法(在路由配置中)

{
	name:'xiangqing',
	path:'detail/:id/:title',
	component:Detail,
	//第一种写法：props值为对象，该对象中的键值对最终都会通过props传给Detail组件--缺点：传固定值
	// props:{a:900}

	//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
    //props:function($route){}  可简写 props($route){} 
	props($route){
		return {
			id: $route.query.id,
			title: $route.query.title
		}
	}
}

对应的组件接收：

<template>
    <ul>
        <li>{{ id }}</li>
        <li>{{ title }}</li>
    </ul>
</template>

<script>
    //props表示接收传递来的参数
    export default {
        name:'Detail',
        props:['id','title']
    }
</script>