vue router 动态参数

Vue Router 中的动态参数允许你根据 URL 中的不同参数来动态地加载不同的组件或数据。例如，在一个电商网站中，你可以使用动态参数来加载不同的商品页面，而每个商品页面都有唯一的商品 ID 参数。

下面是一个使用动态参数的路由示例：

const router = new VueRouter({
  routes: [
    {
      path: '/product/:id',
      name: 'product',
      component: Product
    }
  ]
})

在上面的示例中，`:id` 表示动态参数，这个参数可以在 URL 中以不同的值出现，例如：

/product/123
/product/456

在这些 URL 中，`123` 和 `456` 都是动态参数，它们将被传递给路由组件 `Product`。在 `Product` 组件中，你可以通过 `$route.params` 对象来访问这个参数：

// Product.vue
export default {
  mounted() {
    const productId = this.$route.params.id
    // 根据 productId 加载商品数据
  }
}

在上面的示例中，`this.$route.params.id` 将返回 URL 中的动态参数值，你可以使用这个值来加载不同的商品数据。

当你使用动态参数时，需要注意以下几点：

- 动态参数必须以冒号 `:` 开头；
- 动态参数可以在路由中的任意位置出现，但只能出现一次；
- 在路由组件中访问动态参数时，需要使用 `$route.params` 对象；
- 动态参数可以与其他路由参数和查询参数一起使用。