18 vue 动态路由传参

params形式

 http://192.168.1.100:8080/#/infoDetailed/231

 //定义路由
{
        path: "/infoDetailed/:newsId",
        name: "InfoDetailed",
        component: () => import("@/views/info/InfoDetailed.vue")
   },

//a组件传参

 handleEdit(index, row) {

  

      this.$router.push({ name: "InfoDetailed", params: { newsId: row.id } });

  },

 

//InfoDetailed.vue组件接收参数

 created() {

    this.newsId = this.$route.params.newsId;

 }

 

params传参配置props属性

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：也就是说配置了props就不用使用this.$route.params.xxx了.直接挂载到组件的props属性上。方便其他使用

props搭配query传参不会生效。

 {
        path: "/infoDetailed/:newsId",
        name: "InfoDetailed",
        component: () => import("@/views/info/InfoDetailed.vue"),
        props: true
    },


handleDetailEdit(index, row) {
      let id = row.id;
      this.$router.push({
        name: "InfoDetailed",
        params: { newsId: id }
      });
    },


//InfoDetailed.vue
 props: {
    newsId: {
      type:String,
      required:true
    }
  },

 

 

query传参

http://192.168.1.100:8080/#/infoDetailed?newsId=230

 {
        path: "/infoDetailed",
        name: "InfoDetailed",
        component: () => import("@/views/info/InfoDetailed.vue")
    }




 handleEdit(index, row) {
      console.log(index, row);
      this.$router.push({ name: "InfoDetailed", query: { newsId: row.id } });
  },


//InfoDetailed.vue

 created() {
    this.newsId = this.$route.query.newsId
  }

 

 params参数丢失问题

以name自定义属性举例子：

不要在params中随便加路由path中未定义的动态路由参数。

另外即使加了name属性，跳转到新的页面url地址http://192.168.1.100:8080/#/infoDetailed/231 也只会携带上newsId的参数信息，不会带上name的数据信息。

 handleEdit(index, row) {
      console.log(index, row);
      // params参数丢失问题：name在router.js路由path中并没有配置， path: "/infoDetailed/:newsId",
      //自己强行加进去，跳转到新页面，第一次会存在，但是一旦刷新，name参数直接丢失。而newsId无此问题。
      this.$router.push({ name: "InfoDetailed", params: { newsId: row.id,name:'zs' } });
    },