Javascript 第一次加载此页面时从slug获取id

我想解决以下问题：

我为我的

vue路由器创建了此路由

：

 {
    path: ':slug',
    name: 'category.view',
    component: () => import( /* webpackChunkName: "category-view" */ '@/js/pages/Category/View'),
},

如果我像这样链接此路由，我可以访问类别的ID：

<router-link
        :to="{ name: 'category.view', params: {slug: url.slug, id: url.id } }"
        v-slot="{ href, route, navigate }">
...
</router-link>

但是，如果未单击

路由器链接

访问该页面，则

id

将丢失。目前我正以这种方式解决它，但这段代码有一种气味：-D如果没有ID参数，我将获取所有类别，并搜索与请求中的

slug

匹配的

slug

beforeRouteEnter (to, _from, next) {

    if (to.params.id) {
        axios
        .get (`/api/category/${to.params.id}`).then ((resp) => {
            next ((vm) => {
                vm.category = resp.data.data;
            });
        });
    } else {
        axios
        .get ('/api/category/index?length=-1').then ((resp) => {
            next ((vm) => {
                let categories = resp.data.data;

                categories.forEach (function (category) {
                    let result = category.fields.find (x => x.type === 'slug'); //each category has a field with the type "slug"

                    if (result.value === to.params.slug) {
                        axios
                        .get (`/api/category/${category.id}`).then ((resp) => {
                            vm.category = resp.data.data;
                        });
                    }
                });
            });
        });
    }
},

---

我的问题是：使用Vue和Vue路由器是否有更优雅的方法来解决此问题？

是否有特别的原因让您使用slug而不仅仅是id？此外，您是否能够以任何方式修改API或数据？不，它是一个外部只读API它是哪个API？我会考虑一下客户端解决方案，它是一个来自外部服务提供商的定制API，没有在线文档记录。我想通过自己的API控制器获取所有

类别

，搜索slug并缓存结果。你怎么认为？

beforeRouteEnter (to, _from, next) {

    if (to.params.id) {
        axios
        .get (`/api/category/${to.params.id}`).then ((resp) => {
            next ((vm) => {
                vm.category = resp.data.data;
            });
        });
    } else {
        axios
        .get ('/api/category/index?length=-1').then ((resp) => {
            next ((vm) => {
                let categories = resp.data.data;

                categories.forEach (function (category) {
                    let result = category.fields.find (x => x.type === 'slug'); //each category has a field with the type "slug"

                    if (result.value === to.params.slug) {
                        axios
                        .get (`/api/category/${category.id}`).then ((resp) => {
                            vm.category = resp.data.data;
                        });
                    }
                });
            });
        });
    }
},