vue从一个页面跳转到另一个界面，带参数跳转

使用 编程式导航：
跳转：

this.$router.push('/one')

有记录，可返回。
返回：

this.$router.back() 

1. 方式1：path+querythis.$router.push({// 跳转到的页面路径path:'/detailPage',// 传递的参数集合query:{detailData: data }})``````created(){this.detailData =this.$route.query.detailData}
2. 方法2：name+paramsthis.$router.push({// 跳转到的页面名name:'detailPage',// 传递的参数集合params:{detailData: data }})``````created(){this.detailData =this.$route.params.detailData}## query与params的区别相同点：都是Object类型 不同点：query: 一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /4?age=21，则有 $route.query.age == 21，如果没有查询参数，则是个空对象。地址栏中会显示传递的参数信息，因此这种方式不太安全。params: 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。## 注意- name与params,path与query搭配使用- 注意区分$router 与 $route $router: 全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。 $route : 路由对象，表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息

解决使用name+params传参时，刷新页面，参数丢失的问题

• 路由配置{path:'/detailPage/:id',name:'detailPage',component: Detail,}
• 通过 $router.push 的 params 传参toDetailPage(data){this.$router.push({name:'detailPage',params:{id: data.id }})},
• 获取参数created(){const id =this.$route.params.id}