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' } });
},