Vue 之二级路由

在 Vue 中，我们可以使用路由来实现页面的跳转和管理。除了一级路由，我们还可以使用二级路由来更好地组织和管理页面。本攻略将介绍如何在 Vue 中使用二级路由，并提供两个示例。

创建二级路由

在 Vue 中，我们可以在路由配置中创建二级路由。以下是创建二级路由的示例：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      children: [
        {
          path: 'info',
          component: Info
        },
        {
          path: 'contact',
          component: Contact
        }
      ]
    }
  ]
})

在此示例中，我们在路由配置中创建了一个名为 About 的一级路由，并在 About 路由下创建了两个二级路由：Info 和 Contact。

跳转到二级路由

在 Vue 中，我们可以使用 router-link 组件来跳转到二级路由。以下是跳转到二级路由的示例：

<router-link to="/about/info">Info</router-link>
<router-link to="/about/contact">Contact</router-link>

在此示例中，我们使用 router-link 组件来跳转到 About 路由的 Info 和 Contact 二级路由。

示例

以下是两个示例，展示如何在 Vue 中使用二级路由：

示例一：创建 About 路由和二级路由

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About,
      children: [
        {
          path: 'info',
          component: Info
        },
        {
          path: 'contact',
          component: Contact
        }
      ]
    }
  ]
})

在此示例中，我们在路由配置中创建了一个名为 About 的一级路由，并在 About 路由下创建了两个二级路由：Info 和 Contact。

示例二：跳转到 About 路由下的二级路由

<router-link to="/about/info">Info</router-link>
<router-link to="/about/contact">Contact</router-link>

在此示例中，我们使用 router-link 组件来跳转到 About 路由下的 Info 和 Contact 二级路由。

总结

在 Vue 中，我们可以使用路由来实现页面的跳转和管理。除了一级路由，我们还可以使用二级路由来更好地组织和管理页面。在本攻略中，我们介绍了如何在 Vue 中创建和跳转到二级路由，并提供了两个示例。