Vue Router系列之（四）嵌套路由

嵌套（多级）路由

展示区中包含了新的导航区和展示区

1. 配置路由规则，使用children配置项：

   routes:[
     	//routes中直接配置的是一级路由
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news，vue-router会帮我们加/
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]
   

2. 跳转（to属性中要写完整路径）：

   <!--如果写成/news，路由器会去一级路由的路由规则中比对-->
   <router-link to="/home/news">News</router-link>
   

注1：通常会先配置好路由规则，再去组件中写跳转的路径

注2：不管是界面中还是路径，或者是路由器的路由规则中都体现出了多级路由的概念