vue 动态路由传参三种方式

1. //   直接调用$router.push 实现携带参数的跳转
           this.$router.push({
             path: `/describe/${id}`,

   需要对应路由配置如下：

    {
        path: '/describe/:id',
        name: 'Describe',
        component: Describe
      }
   
   //获取参数方法

   this.$route.params.id

    

2. this.$router.push({
             name: 'Describe',
             params: {
               id: id
             }
           })

   路由配置：

   //这里可以添加:/id 也可以不添加，不添加数据会在url后面显示，不添加数据就不会显示
     {
        path: '/describe',
        name: 'Describe',
        component: Describe
      }
   
   //获取参数

   this.$route.params.id

    

3. //query传递的参数会显示在url后面?id=？
     this.$router.push({
             path: '/describe',
             query: {
               id: id
             }
           })

   对应路由配置：

    {
        path: '/describe',
        name: 'Describe',
        component: Describe
      }
   
   
   //获取参数

   this.$route.query.id

   注意：
   在子组件中 获取参数的时候是$route.params 而不是
   $router 这很重要~~~