Vue-router 子路由（嵌套路由）介绍

在 Vue.js 应用程序中，路由是实现单页面应用（SPA）导航的关键。Vue-router 是 Vue.js 官方的路由管理器，提供了声明式的路由配置方式。子路由是一种路由组织方式，允许开发者将路由嵌套在父路由下，形成层次化的路由结构。这种结构有助于更好地组织和管理复杂的应用程序。

子路由的使用场景非常广泛，例如在一个电商应用中，我们可能需要一个用户管理模块，该模块下有查看用户列表、编辑用户信息、查看用户订单等子功能。这时，我们可以使用子路由来组织这些相关的路由。

在 Vue-router 中，子路由是通过在父路由配置中添加 children 属性来实现的。children 属性的值是一个包含子路由配置的数组。每个子路由配置对象与顶级路由配置对象类似，具有 path、component、name 等属性。

在电商中，Vue子路由可以用于构建商品详情页面。例如，当用户点击某个商品时，可以通过子路由跳转到该商品的详情页面。

以下是一个示例代码，展示如何使用Vue子路由实现电商商品详情页面的构建：

// 安装 vue-router
// npm install vue-router

// 导入 Vue 和 VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import Home from './components/Home.vue'
import ProductList from './components/ProductList.vue'
import ProductDetails from './components/ProductDetails.vue'

// 使用插件
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/products', component: ProductList },
    {
      path: '/products/:id',
      component: ProductDetails,
      // 子路由
      children: [
        { path: 'details', component: ProductDetails }
      ]
    }
  ]
})

// 导出路由实例
export default router

在上面的代码中，我们首先安装了vue-router库，并导入了必要的组件。然后，通过Vue.use(VueRouter)来使用插件。接下来，创建了一个路由实例，并配置了各个路由的路径和对应的组件。

在routes数组中，我们定义了三个路由：/对应首页组件Home，/products对应商品列表组件ProductList，/products/:id对应商品详情组件ProductDetails。其中，/products/:id路由使用了动态参数:id来表示具体的商品ID。

在/products/:id路由的配置中，我们使用了子路由children来定义了商品详情页面的子路由。在这个例子中，我们只定义了一个子路由/details，它对应商品详情组件ProductDetails。

最后，我们将路由实例导出，以便在其他地方使用。

通过以上代码，我们可以实现在电商应用中使用Vue子路由构建商品详情页面的功能。当用户访问/products/:id/details路径时，将会显示对应商品的详情信息。