vue3组合式api

 1。路由传参的方式
 
    query传参
    
    <router-link :to="{
            path:'/cart/detali',
            query:{
              id:item.id,
              name:item.name,
              content:item.content
            }
          }">
          {{item.name}}</router-link>
          
          
          
          
          <template>
    <div>
          <ul>
            <li>id:{{query.id}}</li>
            <li>name:{{query.name}}</li>
            <li>content:{{query.content}}</li>
          </ul>
    </div>
</template>

<script setup name="CartLeft">
    import { useRoute } from 'vue-router';
    import { toRefs } from 'vue';
    const route = useRoute();
    const {query} = toRefs(route);
    console.log(route);
</script>


 query传参
 <router-link :to="{
          name:'detali',
          params:{
            id:item.id,
            name:item.name,
            content:item.content
          }
          }">{{item.name}}</router-link>
          
          children:[
        { name:'detali',
          path:'detali/:id/:name/:content',
          // path:'detali',
          component:CartLeft
        }
      ]
      
      <script setup name="CartLeft">
    import { useRoute } from 'vue-router';
    import { toRefs } from 'vue';
    const route = useRoute();
    const {params} = toRefs(route);
    console.log(route);
</script>

    <div>
          <ul>
            <li>id:{{query.id}}</li>
            <li>name:{{query.name}}</li>
            <li>content:{{query.content}}</li>
          </ul>
    </div>