[vue vue-router]vue3路由获取请求参数

在使用vue路由的时候，比如有一个tab栏，点击tab栏不同的tab切换。

在配置二级路由时，不把id写死，作为路由参数站位

  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        {
          path: '',
          component: Home
        },
        {
          // 此处我们把id作为一个可变id配置
          path: '/category/:id',
          component: Category
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]

在请求数据的时候，后端需要传入id获取数据，这里的http是我封装的axios

export function getCategoryListAPI(id) {
  return http({
      url: `/category`,
      params:{
        id
      }
    })
}

使用RouterLink标签配置路由，将参数传入路由路径中 

<RouterLink :to="`/category/${item.id}`" active-class="active">{{ item.name }}</RouterLink>

当鼠标悬浮的时候，左下角显示路径

通过vue3的API拿到路由参数

import { useRoute } from 'vue-router';

const route = useRoute()
const categoryList = ref({})
const getCategoryList = async () => {
  const res = await getCategoryListAPI(route.params.id)
  categoryList.value = res.result
}

测试通过，数据获取成功