Vue(二十) 路由二

路由的query参数

1. 传递参数

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

2. 接受参数

$route.query.id
$route.query.title

实例代码
Message.vue

Detail.Vue接受数据

三级路由：

路由的命名

1. 作用：可以简化路由的跳转。

2. 如何使用

给路由命名：

	{
		path:'/demo',
		component:Demo,
		children:[
			{
				path:'test',
				component:Test,
				children:[
					{
	                    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:{
		   id:666,
           title:'你好'
		}
	}"
>跳转</router-link>

示例代码

路由的params参数

1. 配置路由，声明接收params参数
   

2. 传递参数
   特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>

3. 接收参数：
   

路由的props配置

作用：让路由组件更方便的收到参数

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

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

实例代码


运行结果