Vue2-动态路由传参的基本用法

在Vue 2中，可以使用动态路由传递参数。动态路由参数允许你在路由路径中包含占位符，这些占位符可以在路由被匹配时提取出来并作为参数传递给组件。

下面是一个使用Vue 2动态路由传参的基本用法的例子：

1. 首先，在路由配置文件（通常是router/index.js）中定义一个带有动态参数的路由路径：

import Vue from 'vue';
import Router from 'vue-router';
import ProductDetail from '@/components/ProductDetail';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/product/:id', // 使用冒号表示参数是动态的
      name: 'ProductDetail',
      component: ProductDetail
    }
  ]
});

1. 创建一个组件来接收和使用动态参数：

在上面的例子中，我们定义了一个名为ProductDetail的组件，并在路由配置中指定了动态参数:id。在组件的created生命周期钩子中，我们使用this.$route.params.id来获取动态参数的值，并将其赋值给productId属性。

当访问/product/123时，路由会匹配到ProductDetail组件，并将动态参数123传递给组件的productId属性。组件将显示"Product ID: 123"。

这就是Vue 2中动态路由传参的基本用法。你可以根据需要在路由路径中定义多个动态参数，并在组件中使用它们。