Vue 路由实现：揭秘动态、嵌套路由的奥秘

迈向动态路由的征程

Vue 路由无疑是构建单页应用（SPA）的利器，它使我们能够以一种优雅而直观的方式在页面之间导航。而动态路由则为 SPA 带来了无限的可能，它允许我们根据用户输入或服务器响应来动态地生成路由。

要实现动态路由，我们需要在路由规则中填写 props 为 true。这会将路由参数传递给组件，让我们能够在组件内部通过 props 获取对应路由参数。

// 路由规则
const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    props: true,
  },
];

例如，如果我们在浏览器地址栏输入 /user/123，那么 UserDetail 组件就会收到一个名为 id 的 props，其值为 123。

// UserDetail.vue
<template>
  <div>
    <h1>用户 ID：{{ id }}</h1>
  </div>
</template>

<script>
export default {
  props: ['id'],
};
</script>

嵌套路由的无限可能

嵌套路由是将一个路由嵌套在另一个路由之下的技术，它为构建复杂的应用程序提供了极大的灵活性。

为了实现嵌套路由，我们需要使用 router-view 组件。router-view 是一个动态组件，它会渲染当前激活路由的组件。

// 路由规则
const routes = [
  {
    path: '/user/:id',
    component: UserDetail,
    children: [
      {
        path: 'profile',
        component: UserProfile,
      },
      {
        path: 'orders',
        component: UserOrders,
      },
    ],
  },
];

// UserDetail.vue
<template>
  <div>
    <h1>用户 ID：{{ id }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  props: ['id'],
};
</script>

现在，当我们访问 /user/123/profile 时，UserProfile 组件就会被渲染在 UserDetail 组件内部。

Layout 组件：抽离公共部分，构建一致性

在构建复杂的单页应用时，我们会发现许多组件都具有相似的布局。为了避免重复代码，我们可以使用 Layout 组件来抽离这些公共部分。

// Layout.vue
<template>
  <div>
    <header>
      <h1>我的应用</h1>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>Copyright © 2023</p>
    </footer>
  </div>
</template>

<script>
export default {
};
</script>

// App.vue
<template>
  <Layout>
    <router-view></router-view>
  </Layout>
</template>

<script>
export default {
};
</script>

这样，所有需要使用相同布局的组件都可以直接使用 Layout 组件，从而保持整个应用的一致性和代码的可维护性。

结语

动态路由、嵌套路由和 Layout 组件是 Vue 路由中的重要概念，掌握这些概念能够帮助我们构建更加灵活、高效和美观的单页应用。