路由传参query：

<template>
  <div>
    <button @click="routerFn">路由传参</button>
  </div>
</template>
<script>
import { defineComponent,ref } from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
  name:'home',
  setup() {
    const userRouter = useRouter()
   
    let name=ref('zhihui')
    let age=ref(30)
    let obj=ref({'favirate':'running'})
    let routerFn=()=>{
      userRouter.push({
        // name:'About',
        path:'/about',
       
        query:{
          name:name.value,
          age:age.value,
          obj:JSON.stringify(obj.value)
        }
      })
    }
    return{
      
      routerFn,
    }
  },
})
</script>

路由接参query

<template>
  <div class="about">
    <h1></h1>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import {useRoute} from 'vue-router'
export default defineComponent({
  setup() {
    let route = useRoute()
    console.log( route,router.query)
    return{        
    }
  },
})
</script>

这里有个坑，标注一下
路由传参params

<template>
  <div>
    <button @click="routerFn">路由传参</button>
  </div>
</template>
<script>
import { defineComponent,ref } from 'vue'
import {useRouter} from 'vue-router'
export default defineComponent({
  name:'home',
  setup() {
    const userRouter = useRouter()
    let name=ref('zhihui')
    let age=ref(30)
    let obj=ref({'favirate':'running'})
    let routerFn=()=>{
      userRouter.push({
        // name:'About',
        path:'/about',
        params:{
           name:name.value,
          age:age.value,
          obj:JSON.stringify(obj)
        }
      })
    }
    return{
      routerFn,
    }
  },
})
</script>

路由接参params

<template>
  <div class="about">
    <h1></h1>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import {useRoute} from 'vuex'
export default defineComponent({
  setup() {
    let route = useRoute()
    console.log( route,route.params)
    return{
        
    }
  },
})
</script>

你有没有照抄上面的代码，如果有，你一定发现,route.params是空。
为什么呢？
因为在传参的时候params跟name:‘About’，这个属性配对，如果写path:’/about’, params:{}.这样就是错了。不能正常输出route.params
正解的把 path:’/about’,注释掉。使用 name:‘About’,