Vue.js框架--嵌套路由（二十）

主要操作技能

    嵌套路由 就是 (路由里面嵌套他的子路由)
    子路由关键属性children
  1）配置路由

{
        path: '/user',
        component: Users,
        children: [{  //父子组件配置,注意不能写/
                path: 'useradd',
                component: UserAdd
            },
            {
                path: 'userlist',
                component: UserList
            },

        ]

    }

  
  2）父路由里面配置子路由显示
      最顶层的出口，渲染最高级路由匹配到的组件

 模拟: http://element-cn.eleme.io/#/zh-CN/component/installation

说明： 单击“组件”，左边是导航单击，右边是显示的内容

编写代码:

User.vue 用户中心

UserAdd.vue 与UserList.vue 子组件

 

 main.js

import Users from './components/Users.vue' //引入组件
import UserAdd from './components/user/UserAdd.vue' //引入子组件
import UserList from './components/user/UserList.vue' //引子组件

//2.配置路由
const routes = [{
		path: '/home',
		component: Home
	},
	{
		path: '/news',
		name: 'news',
		component: News
	},
	{
		path: '/user',
		component: Users,
		children: [{  //父子组件配置,注意不能写/
				path: 'useradd',
				component: UserAdd
			},
			{
				path: 'userlist',
				component: UserList
			},

		]

	},

 

效果:

用户中心

单击用户,显示导航

左边导航，右边显示

单击用户列表，右边显示列表 

直接单击用户默认显示添加用户