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 lang="ts">
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即可