vue 笔记（十五）路由嵌套

接着上次的项目

1.新建目录user，新建List.vue和Profile.vue  两个组件

2.修改main.vue，使用侧边栏

3.修改路由配置，router目录下的index.js

import Vue from 'vue'
import Router from 'vue-router'

import Main from "../views/Main";
import Login from "../views/Login";

import List from "../views/user/List";
import Profile from "../views/user/Profile";

Vue.use(Router);

export default new Router({
  routes:[
    {
      path:'/main',
      name:'main',
      component:Main,
      children:[
        {
          path:'/user/profile',
          component:Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]
    },
    {
      path:'/login',
      name: 'login',
      component:Login
    }
  ]
})

其中children表示main的子路由

4.运行结果

点击个人信息：

点击用户列表：