[Vue] 页面跳转间传递参数的全过程

我正在参加「掘金·启航计划」

一、「页面跳转间传递参数」要解决什么问题？

根据在Vue Router中的预设，可以实现组件间、页面间的跳转。有时需要这样的特性：

从本页面跳转时，携带特定信息到新页面。

举例：Blog 项目中，需求是

在「文章列表」页面，点击「编辑文章」按钮，携带当前文章的id跳转到「编辑文章」页面

二、项目中的具体实现

1.为目标页面添加动态参数，并打开props属性

2.在源页面的跳转处传入动态id

3.在目标页面的vue文件里添加props属性，属性名和Vue Router的path内冒号:后的参数名一致

4.在目标页面中使用该参数

Vue的props数组内的["id"]可看作是同名的

data(){
  return{
  id:"",
  }
}

三、总结

其实Vue的页面间跳转原理和前后端Restful API请求url的思路很像：
都是通过传递一个url来指定目标；都有:id的写法传入动态参数。