VUE中通过路由传参

1. 若 to="/login?name=cc&age=16" 则 路由规则不需修改
   则路由 -->path:'/login'
console.log(this.$route.query) //{name: "cc", age: "16"}
2. 若to="/register/cc/16"
   则路由 --> path:'/register/:name/:age'
console.log(this.$route.params) //{name: "cc", age: "16"}

params-地址栏显示

• 路由规则

  { path: '/data/revenue/detail/:id', component: DataRevenueDetail},
  

• 父组件传参

  this.$router.push(`/data/revenue/detail/${id}`)
  

• 子组件接收

  const id = this.$route.params.id
  

• 地址栏显示参数
  http://localhost:8080/#/data/revenue/detail/1

params-地址栏不显示

• 路由规则

  { path: '/data/revenue/detail', name: 'DataRevenueDetail', component: DataRevenueDetail},
  

• 父组件传参

  this.$router.push({
      name: 'DataRevenueDetail',
      params: {
        id: 1
      }
  })
  

• 子组件接收

  const id = this.$route.params.id
  

• 地址栏不显示参数
  http://localhost:8080/#/data/revenue/detail