Получить идентификатор из пули, когда эта страница загружается первой - PullRequest
Новая
       5

Получить идентификатор из пули, когда эта страница загружается первой

0 голосов
/ 20 января 2020

Я бы хотел решить следующую проблему:

Я создал этот маршрут для своего vue-router: 

 {
    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>

Работает отлично. Я могу использовать идентификатор в моем компоненте следующим образом: 

beforeRouteEnter (to, _from, next) {
    axios
    .get (`/api/category/${to.params.id}`).then ((resp) => {
        next ((vm) => {
            vm.category = resp.data.data;
        });
    });
},

Но если к странице обращаются без нажатия router-link, id отсутствует. На данный момент я решаю это таким образом, но этот код пахнет :-D Если нет идентификатора параметра, я получаю все категории и ищу одну с 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 -router?

...