4.5 路由嵌套

实现路由嵌套有2个步骤：

1. 创建对应的子组件，并在路由映射中进行配置(添加children属性，该属性为数组)
2. 组件内部使用<router-view>标签

也可以设置默认路径

在编辑器中注意下这种写法：ul>li*6>{消息$}

//配置路由相关信息
import VueRouter from "vue-router"
import Vue from 'vue'
// import home from '../components/home'
// import about from '../components/about'
const home=()=>import('../components/home')
const about=()=>import('../components/about')
//导入嵌套的子组件
const message=()=>import('../components/message')
const news=()=>import('../components/news')
//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRoter对象
const router=new VueRouter({
	//配置路由和组件之间的映射关系
	routes:[
		//一个映射关系就是一个对象
		{
			path:'/',
			redirect:'/home'
		},
		{
			path:'/home',
			component:home,
			children:[
				{
					path:'',
					redirect:'message'
				},
				{
					path:'message',
					component:message
				},
				{
					path:'news',
					component:news
				}
			]
		},
		{
			path:'/about/:userid',
			component:about
		}
	],
	mode:'history'
})
//3.将router对象传入Vue实例中
export default router

<template>
	<div>
		<h1>我是home页面</h1>

		<router-link to="/home/message">今日消息</router-link>
		<router-link to="/home/news">今日新闻</router-link>
		<router-view></router-view>
		
	</div>
</template>

<script>
	export default {
		name:'home'
	}
</script>

<style>
</style>

路由传递参数

<router-link :to="{path:'/photo',query:{name:'张三',age:18}}">照片</router-link>

btnPhotoClick(){
	this.$router.push({
		path:'/photo',
		query:{
			name:'button',
			age:118
		}
	})
}

<template>
	<div>
		<p>{{$route.query.name}}</p>
		<p>{{$route.query.age}}</p>		
	</div>
</template>