43.嵌套路由 ，路由守卫， 鉴权

嵌套路由

其实就是某个路由下面的组件里面，又有根据路由的不同，显示不同的东西。 比方说下图中Home,About,User三个组件，然后在User里面昨天是一样的，右边又是根据子路由显示的不同，就是嵌套路由。嵌套路由可以嵌套多层。

const routes = [
  {
    path: '/',
    component: Home,
  },
  {
    path: '/about',
    component: () => import('../views/About.vue'),
  },
  {
    path: '/user',
    component: () => import('../views/user/Layout.vue'),
    children: [
      {
        path: '', // 匹配的 /user
        component: () => import('../views/user/Profile.vue'),
      },
      {
        path: 'address', // /user/address
        component: () => import('../views/user/Address.vue'),
      },
      {
        path: 'security',
        component: () => import('../views/user/Security.vue'),
      },
      {
        path: 'friends',
        component: () => import('../views/user/Friends.vue'),
      },
    ],
  },
];

<template>
  <div>
    <div
      class="fixed bg-gray-900 text-white w-full leading-10 flex justify-center h-10"
    >
      <router-link active-class="text-yellow-600" exact class="mx-5" to="/">
        Home
      </router-link>
      <router-link active-class="text-yellow-600" class="mx-5" to="/about">
        About
      </router-link>
      <router-link active-class="text-yellow-600" class="mx-5" to="/user">
        User
      </router-link>
    </div>
    <div class="h-10"></div>
    <div class="min-h-screen py-10 lg:w-1/2 h-10 mx-auto">
      <router-view />
    </div>
    <div class="border-solid border-t mt-10 text-center py-10 bg-gray-100">
      Footer
    </div>
  </div>
</template>

<template>
  <div class="flex">
    <nav
      class="w-50 flex-none border-r p-10 flex flex-col leading-loose text-gray-500"
    >
      <router-link exact to="/user" active-class="text-yellow-600">
        profile
      </router-link>
      <router-link to="/user/address" active-class="text-yellow-600">
        address
      </router-link>
      <router-link to="/user/security" active-class="text-yellow-600">
        security
      </router-link>
      <router-link to="/user/friends" active-class="text-yellow-600">
        friends
      </router-link>
    </nav>
    <div class="flex-auto">
      <router-view></router-view>
    </div>
  </div>
</template>

鉴权