vue中配置一级路由和二级路由

请观赏

1.创建组件
2.在index.js里引入并配置
    import Vue from 'vue'
    import Router from 'vue-router'
    import Home from '@/components/Home'
    import Cart from '@/components/Cart'
    import Small from '@/components/Small'
    import User from '@/components/User'
    import List from '@/components/List'
    import Shop from '@/components/Shop'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/home',
          name: 'Home',
          component: Home,
          children:[
            {
              path:"list",
              name:"List",
              component:List
            },
            {
              path:"shop",
              name:"Shop",
              component:Shop
            },
            {
              path:"/home",
              redirect:"/home/list"
            }
          ]
        },
        {
          path: '/cart',
          name: 'Cart',
          component: Cart
        },
        {
          path: '/small',
          name: 'Small',
          component: Small
        },
        {
          path: '/user',
          name: 'User',
          component: User
        },
        {
          path: '/',
          redirect:"/home"
        }
      ]
    })
3.一级路由的显示
    <div class="footer">
        <ul>
            <li>
                <router-link to="/home">首页</router-link>
            </li>
            <li>
                <router-link to="/cart">购物车</router-link>
            </li>
            <li>
                <router-link to="/small">微淘</router-link>
            </li>
            <li>
                <router-link to="/user">我的</router-link>
            </li>
        </ul>
    </div>
4.二级路由的显示
    <div class="hello">
          <ul>
            <li>
              <router-link to="/home/list">列表页</router-link>
            </li>
            <li>
              <router-link to="/home/shop">购物车</router-link>
            </li>
          </ul>
          <div>
            <router-view></router-view>
          </div>
    </div>