页面路由参数

• 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.params.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 参数 - promise
    	const { 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,
        	}
    	}
    })