嵌套路由

路由的嵌套使用

实现嵌套的两个步骤

1、创建对应的子组件，并且在路由映射中配置对应的子路由

{
		path:'/home',
		component:home,
		children:[
			{
				path:'news',
				component:news
			},
			{
				path:'message',
				component:message
			}
		]
	},

2、在组件内部使用<router-view>标签

<template>
	<div>
		<h2>home</h2>
		<router-link to="/home/news" style="margin: 5px;">新闻</router-link>
		<router-link to="/home/message" style="margin: 5px;">消息</router-link>
		<router-view></router-view>
	</div>
</template>

二、传递参数

params的类型

• 配置路由格式/router/:id
• 传递方式：在path后面跟上对应的值
• 传递形成后的路径：/route/123,/router/abc…

query的类型

• 配置路由格式：/router，普通的配置

  {
  		path:'/profile',
  		component:profile
  	}
  

• 传递方式：对象中使用query的key作为传递方式

  <router-link :to="{path:'/profile',query:{name:'乔木'}}" tag="button">档案</router-link>
  
  

• 传递后形成的路径；/router?id=123,/router?id=abc

  url会更改成：http://localhost:8080/profile?name=乔木

  url的构成：协议://主机:端口/路径？查询（翻译成英文是：scheme://host:port/path?query#fragment）因为一般都是80端口，所以可以省略

用代码传递数据

				this.$router.push('/user/'+this.userId)
			},
			profileClick:function(){
				this.$router.push({
					path:'/profile',
					query:{
						name:'乔木'
					}
				})
			}
r.push({
					path:'/profile',
					query:{
						name:'乔木'
					}
				})
			}