vue3 中的路由传参

看了Vue Router官方文档感觉没理解清楚

我就记录一下我常用的路由方式传参

1、params传参 这种方式不会在url中暴露参数属性

父级组件

<router-link active-class="active" tag="li" :to="{name:'test',params:{name:'lynn',like:'水果'}}">影院</router-link> 

路由

{
     path:'/test',
     name:'test',
     component:Test,
     // props: true, // 直接写这个也可以
     // 下面这个像是一种代码规范记录路由传参,我用的ts，如果是js的朋友把:any去掉就行（笑死我了 anyScript）
     props : (route:any) => ({
          name : route.query.name,
          age : route.query.age
      })
}

路由页面

<template>
  <div>test</div>
  <div>{{name}}</div>
</template>
<script >
import {defineComponent} from 'vue'
export default defineComponent({
    name:'test',
    props:['name','like'],
    // ref可以接收props里的值
    setup(ref){
        console.log(ref);
    }
})
</script>

2、query传参 暴露url属性

把第一种方法里的params改成query即可