【Nuxt3】路由参数（动态路由、嵌套路由）

news/2024/7/10 0:56:10 标签: nuxt3, vue

页面路由参数

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 参数 - 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,
    	}
	}
})