常见问题

如何升级到 JDK21

1. 修改根目录下的pom.xml 文件中的java版本和maven插件版本
2. 在idea中修改项目结构
3. 修改springboot版本为3.1.4 或以上

修改完毕后，启动项目即可。

说明：修改SpringBoot版本是因为之前使用的SpringBoot版本为3.1.1 ，这个版本默认使用的lombok版本是1.18.28，会导致lombok与jdk21不匹配，所以升级SpringBoot版本为3.1.4，因为在SpringBoot3.1.4中默认使用的lombok版本为1.18.30，lombok版本1.18.30是与jdk21匹配的。

路由传参

项目中使用的vue-router版本：4.1.6

方式一

通过url传递参数，参数会拼接到url上，即使刷新页面参数也不会丢失，适合参数较少的场景，参数中如果有符号之类的可以传递参数时将参数编码，接收时在将参数解码。

1. 在src/router/index.js 中增加页面，增加的页面需要指定name，这个name是唯一的。

const commonRoutes = [
    {
        path: '/',
        name: 'Container',
        component: Container,
        children: [
                {path: '/', component: Index, meta: {title: '控制台'}},
                {                                             +++++
                    path: '/test/:userId/:userName',          +++++
                    name: 'Test',                             +++++
                    component: Test,                          +++++
                    meta: {title: '测试'}                      +++++
                },                                            +++++
                {path: '/user/setting', component: UserSetting, meta: {title: '用户设置'}},
        ]
    },
    {path: '/login', name: 'Login', component: Login, meta: {title: '登录'}},
    {path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound, meta: {title: ''}},
]

2. 在页面中，增加跳转，注意使用的是useRouter

<template>
	<div>
		<a-button @click="btnClick">点击跳转</a-button>
	</div>
</template>
<script setup>
import {useRouter} from "vue-router";  
const router = useRouter()

const btnClick = () => {
    router.push({
        name: 'Test',
        params: {
            userId: 'xxxxxxxxxId',
            userName: '小太阳'
        }
    })
}
</script>

3. 在Test页面中接收参数，注意使用的是useRoute

<template>
    <div>
        <p>自定义的页面</p>  
		<p>{{$route.params.userId}}</p>  
		<p>{{$route.params.userName}}</p>
    </div>
</template>

此时url将变成：http://localhost:5173/#/test/xxxxxxxxxId/小太阳，如果需要拿到参数后做一些处理，比如发起网络请求等，可以在script中接收参数。

<template>
    <div>
        <p>自定义的页面</p>  
    </div>
</template>
<script setup>
import {useRoute} from "vue-router";
import {onMounted} from "vue";
const route = useRoute()

onMounted(() => {
    console.info('接收参数userId：', route.params.userId)
    console.info('接收参数userName：', route.params.userName)
})
</script>