vue3 vite ts 路由props， 简写路由传递参数

一、params简写

1、路由

props: true

注意：只能params传参可以使用

{   
    name:'detail',
    path:'detail/:id/:name/:content?',
    component:()=>import('@/views/Detail.vue'),
    props: true
}

2、使用

a、接收

defineProps([])

b、使用

<template>
  <ul>
    <li>新闻标题：{{ name }}</li>
    <li>新闻内容：{{ content }}</li>
  </ul>
</template>

<script lang="ts" setup name="Detail">
    // useRoute Hooks 
    import { toRefs } from 'vue'
    import {useRoute} from 'vue-router'
    let route = useRoute()
    // 接收
    defineProps(["id", "name", "content"])
</script>

<style>

</style>

 

二、query或params简写

1、路由

a、方法

b、注意：一般query传参使用

{   
    name:'detail',
    path:'detail',
    component:()=>import('@/views/Detail.vue'),
    // query传参
    props(route) {
        return route.query    
    },
}

2、使用

<template>
  <ul>
    <li>新闻标题：{{ name }}</li>
    <li>新闻内容：{{ content }}</li>
  </ul>
</template>

<script lang="ts" setup name="Detail">
    // useRoute Hooks 
    import { toRefs } from 'vue'
    import {useRoute} from 'vue-router'
    let route = useRoute()
    // 接收参数
    defineProps(["id", "name", "content"])
</script>

<style>

</style>