路由——嵌套路由

配置子路由

const user = () => import('./user.vue')
const router = new VueRouter({
  routes: [
    { 
     	path: '/user', 
     	component: user,
     	redirect:'默认子路由path',
     	children: [
            {
                path: '',
                name: 'user', // 默认子路由
                component: Profile
            },
            {
                 path: 'cart',
                 name: 'user-cart',
                 component: Cart
             }
 		 ]
    },
  ]

• 子路由的 path 不需要加 /
• 如果一个子路由的 path 为空，表示为默认子路由。父级 name 属性需要设置给这个默认子路由
• 默认子路由：父设置redirect：子路由的path

父组件里使用 < router-view > 标签放置子组件

  
  //使用
  <template>
    <div>
        <h3>用户中心</h3>
        <ul class="left">
            <router-link exact tag="li" :to="{name: 'user'}">基本信息</router-link>
            <router-link tag="li" :to="{name: 'user-cart'}">我的购物车</router-link>
        </ul>
        <div class="right">
            <router-view></router-view> //放置子页面
        </div>
    </div>
</template>

如果父组件里不需要写任何代码，只需要，可以使用render函数生成一个标签，不需要创建父组件

  {
    path: "/user",
    component: { render: (h) => h("router-view") },
    redirect: "/user/login",
    children: [
      {
        path: "/user/login",
        name: "Login",
        component: () => import("@/views/User/Login"),
      },
      {
        path: "/user/register",
        name: "Register",
        component: () => import("@/views/User/Register"),
      },
    ],
  },