嵌套路由

vue-router

嵌套路由: 一些比较复杂的应用会有多层嵌套的路由和组件组成

例:在应用增加一个用户个人中心，用户中心又是由多个页面组成

添加路由与子路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import Home from '../views/home.vue'
import About from "../views/about.vue"
import User from "../views/child/user.vue"
import Cart from "../views/child/cart.vue"
const routes = [
		{
		    path:'/',
		    redirect:'Home'
		  },
		  {
		    path:'/Home',
		    name:'Home',
		    component:Home
		  },
		  {
		    path:'/About',
		    component:About,
			   children:[
			      {
			        path:'/user',
			        name:'user',
			        component:User
			      },
			      {
			        path:'cart',
			        name:'cart',
			        component:Cart
			      }
			]
		}
]
const router = new VueRouter({
  routes
})
export default router

children 属性

一个路由中的 children 表示嵌套的子路由
1.子路由的 path 如果以 / 开头表示根路径，不再基于父级路径，否则基于父级 path
2.如果一个子路由的 path 为空，表示为默认子路由
3.如果一个路由有默认子路由，则父级 name 属性需要设置给这个默认子路由

子路由视图

    有了子路由以后，还需要在视图组件中设置 router-view

	<template>
	    <div>
	        <h2>用户中心</h2>
	        <ul class="left">
	            <router-link tag='li' :to="{name:'user'}">去个人中心</router-link>
	            <router-link tag='li' :to="{name:'cart'}">去购物中心</router-link>
	        </ul>
	        <div class="right">
	            <router-view></router-view>
	        </div>
	    </div>
	</template>
	
	<script>
	
	</script>
	<style scoped>
	.left {
	    float: left;
	    width: 200px;
	}
	.left li {
	    line-height: 30px;
	    cursor: pointer;
	    list-style: none;
	}
	</style>