vue: 路由跳转并传递参数

路由跳转，默认会销毁上一个组件。如果想保留原组件数据，就加 < keep-alive >

• query方式 (地址栏并不会看到参数，推荐)

// 路由配置文件
  {
    // query方式
    path: '/certificateInfo',
    name: 'certificateInfo',
    component: CertificateInfo
  }
 // A页面-要跳转的页面
       this.$router.push({
        path: '/certificateInfo',
        query: {
          userNo: userNo
        }
      })
 // B页面-要进入的页面
   created () {
    console.log(this.$route)
    console.log(this.$route.query.userNo)
  }

• path方式 (地址栏会看到参数)

// 路由配置文件
  {
    // path方式和name方式跳转该路由必须携带参数(this.$route.params.参数名 来获取)
    path: '/certificateInfo/:userNo',
    name: 'certificateInfo',
    component: CertificateInfo
  }
// A页面-要跳转的页面
  this.$router.push({
     path: '/certificateInfo/' + userNo
   })
// B页面-要进入的页面
  created () {
    console.log(this.$route.params.userNo)
  }

• name方式 (地址栏会看到参数)

// 路由配置文件
  {
    // path方式和name方式跳转该路由必须携带参数(this.$route.params.参数名 来获取)
    path: '/certificateInfo/:userNo',
    name: 'certificateInfo',
    component: CertificateInfo
  }
// A页面-要跳转的页面
      this.$router.push({
        name: 'certificateInfo',
        params: {
          userNo: userNo
        }
      })
// B页面-要进入的页面
  created () {
    console.log(this.$route.params.userNo)
  }