vue3中如何实现动态路由，得到动态数据

一、前端

1.1、前端路由设计

首先在router路由文件中，先要设计一个路径，对于不同的路由，仍然显示同一个页面，在vue3的路由设计下将路由路径中动态部分前面加上：就可以实现动态路由，具体实例如下：

 {
            path: '/post/:id',
            name: 'PostDetails',
            component: () => import('@/views/post/PostDetails.vue'),
            props: true  // 将路由参数作为 props 传递给组件
          },

在我编写的路由中动态部分是查询的id，那么就将id前方添加：就可以实现动态路由。

1.2、前端动态请求

我本身是在设计帖子的页面展示，对于打开对应帖子的详情页，我们应该要得到当前帖子的id，并且根据该id来动态得到具体的帖子详情，那么在这种情况下，如何得到路由中的id，并且作为参数发起请求就十分重要，在这里我利用了axios发起请求的工具类request.js，非常方便，这里提供给大家。

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router'
const baseURL = 'http://127.0.0.1:8080'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL,
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
  (res) => {
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 1) {
      return res
    }
    // TODO 3. 处理业务失败
    // 处理业务失败, 给错误提示，抛出错误
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    // 错误的特殊情况 => 401 权限不足 或 token 过期 => 拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 错误的默认情况 => 只要给提示
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

然后根据这个工具类设计的api中就可以发起请求，注意这里要引用反引号来正确传入参数

export const GetDetailsService = (id) => {  
    return request.get(`/post/${id}`);  
}

在完成了请求后，就可以在具体页面中传参实现向后端发送请求并且得到对应的数据了。

二、后端

对于后端我个人使用的是SSM框架加Mybatis-plus，如果同样使用该技术的，对于后端如何得到动态路径中的参数，可以参考使用@PathVariable注解来得到参数，注意，在路径上，一定要用{}括住动态参数，这里给出我的参考例子：

 @GetMapping("/post/{id}")
    public R<Post> GetOnePost(@PathVariable("id") Integer id){
        LambdaQueryWrapper<Post> queryWrapper = new LambdaQueryWrapper<>();
        queryWrapper.eq(Post::getId,id);
        Post res = postService.getOne(queryWrapper);
        return R.success(res);
    }

希望到这里可以解决大伙动态路由的设计问题。