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

使用 编程式导航：
跳转：this.$router.push('/one') 有记录，可返回。
返回：this.$router.back()

1. 方式1：path+query

   this.$router.push({
       // 跳转到的页面路径
       path: '/detailPage',
       // 传递的参数集合
       query: {
         detailData: data
       }
   })
   

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

2. 方法2：name+params

   this.$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
  }