Vue路由利器 | 8月更文挑战：深度理解嵌套路由

前端

2023-10-24 16:17:25

前言

在上一篇博文中，我们介绍了如何实现简单版的VueRouter。本篇将更进一步，在原有基础上加入嵌套路由功能，以便您深入了解VueRouter。

什么是嵌套路由？

嵌套路由是一种路由结构，允许您在父路由内创建子路由。这种结构非常适合于具有层次结构的应用程序，例如，一个电子商务网站可能会有以下路由：

/：主页
/products：产品列表
/products/:id：产品详情
/cart：购物车
/checkout：结账

其中，/products路由是父路由，/products/:id路由是子路由。当用户访问/products/:id路由时，VueRouter会先加载/products路由，然后加载/products/:id路由。

如何实现嵌套路由？

在VueRouter中，您可以通过嵌套<router-view>组件来实现嵌套路由。例如，以下代码定义了一个父路由和一个子路由：

<template>
  <div>
    <router-view></router-view>
    <router-view name="child"></router-view>
  </div>
</template>

<script>
export default {
  name: 'Parent',
  components: {
    // Child is a Vue component that will be rendered
    // inside the <router-view name="child"></router-view> outlet.
    Child: {
      template: '<div>Child</div>'
    }
  }
}
</script>

<template>
  <div>
    <h1>Products</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/products/' + product.id">{{ product.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'Products',
  computed: {
    ...mapState([
      'products'
    ])
  }
}
</script>

<template>
  <div>
    <h1>Product Detail</h1>
    <p>{{ product.name }}</p>
    <p>{{ product.description }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ProductDetail',
  computed: {
    ...mapState([
      'product'
    ])
  }
}
</script>

在上面的代码中，Parent组件是父路由，Products组件是子路由，ProductDetail组件是孙路由。当用户访问/products路由时，VueRouter会先加载Parent组件，然后加载Products组件。当用户访问/products/:id路由时，VueRouter会先加载Parent组件，然后加载Products组件，最后加载ProductDetail组件。