页面路由参数

• query 参数

  • 目录

    |- pages
    |  |- foo.vue
    

  • 路由地址

    https://loaclhost:8080/foo?id=1
    

  • 参数获取

    // foo.vue
    <template><div>id: {{ route.query.id }}</div>
    </template><script setup lang="ts">
    const route = useRoute()
    console.log('id:', route.query.id)
    </script>
    

• params 参数

  • 目录

    |- pages
    |  |- foo-[name]
    |  |  |- [id].vue
    

  • 路由地址

    https://loaclhost:8080/foo-admin/1
    

  • 参数获取

    // [id].vue
    <template><div>name: {{ route.params.name }}id: {{ route.query.id }}</div>
    </template><script setup lang="ts">
    const route = useRoute()
    console.log('name:', route.params.name)
    console.log('id:', route.params.id)
    </script>
    

• 多层嵌套 params 参数（通常用于捕获404）

  • 目录

    |- pages
    |  |- foo.vue
    |  |  |- [...all].vue
    

  • 路由地址

    https://loaclhost:8080/foo/a
    https://loaclhost:8080/foo/a/b/c
    

  • 参数获取

    // [...all].vue
    <template><div>单层：{{ route.params.all[0] }}多层: {{ route.params.all[2] }}</div>
    </template><script setup lang="ts">
    const route = useRoute()
    console.log('all:', route.params.all)	// array
    </script>
    

服务端路由参数（server/api）

• 正常参数

  • 目录

    |- server
    |  |- api
    |  |  |- foo.get.ts
    |  |  |- bar.patch.ts		// 后缀对应 method
    

  • 请求地址

    // [method] - get
    useFetch('/api/foo?id=1')
    useFetch('/api/foo', { params: { id: '1' } })// [method] - post / put / delete / patch ...
    useFetch('/api/bar', { body: { id: '1' }, method: 'patch' })

  • 参数获取

    // xxx.yyy.ts
    import { H3Event } from 'h3'export default defineEventHandler(async (event: H3Event) => {const method = getMethod(event)const cookie = getCookie(event)const { authorization: token } = getHeaders(event)const { href, origin, search } = getRequestURL(event)// params 参数const { id } = getQuery(event)// body 参数 - promiseconst { id } = await readBody(event)return {data: {id},meta: {code: 200,method,cookie,token,href,origin,search}}
    })
    

• 动态路由参数（与页面路由差不多，但有些区别）

  • 目录

    // 普通路由
    |- server
    |  |- api
    |  |  |- foo
    |  |  |  |- [id].get.ts// 嵌套路由
    |- server
    |  |- api
    |  |  |- bar
    |  |  |  |- [...all].get.ts// 任意嵌套（与上面区别是，上面是指定参数名，任意嵌套则是默认参数名 "_"）
    |- server
    |  |- api
    |  |  |- bar
    |  |  |  |- [...].get.ts
    

  • 请求地址

    // 普通路由参数
    useFetch('/api/foo/1')// 嵌套路由 or 任意嵌套
    useFetch('/api/bar/a/b/c')
    

  • 参数获取

    // xxx.yyy.ts
    import { H3Event } from 'h3'export default defineEventHandler(async (event: H3Event) => {// 嵌套路由不可同时共存，只生效其一const { id, all, _ } = getRouterParams(event)// 注意，与页面路由的区别，服务端路由，得到的参数，是 '/' 拼接的字符串，也就是路径字符串。而页面路由则是数组return {data: {id,			// 普通路由all,		// 嵌套路由_			// 任意嵌套},meta: {code: 200,}}
    })