Как еще передать name в объект route?

Question

[Николай Семенов]

Ребятушки, как передать в route name из комонента
есть вот такие пути:

export const routes = [
    //{ path: '/', component: HomePage },
    { path: '/menu', component: MenuPage, children: [
        { path: '', component: CategoriesPage, name: 'Меню'},
        { path: ':categoryId', component: CategoryPage, children: [
            { path: '', component: ProductsPage },
            { path: ':productId', component: ProductPage }
        ] } 
    ] },
    { path: '/profile', component: ProfilePage, name: 'Профиль' },
    { path: '/cart', component: CartPage, name: 'Корзина' },
    { path: '/promo', component: PromoPage, name: 'Акции' },
    { path: '/restourants', component: RestourantsPage, name: 'Рестораны' }
];

С не динамичными компонентами проблем нет задать имя, а вот как с динамичными быть, такими как
{ path: ':categoryId', component: CategoryPage,
как сделать что бы менялось name в зависимости от названия категории,
у меня сверху должна выводится текущая локация следующим кодом:
{{ $route.name }}

Comments

[RidgeA]

Ответа на вопрос у меня нет, но есть ремарка name в роутах используется для идентификации роута в коде, ни как не для вывода этого в качестве заголовка страницы.
router.vuejs.org/en/essentials/named-routes.html

[Николай Семенов]

RidgeA: согласен, скорей всего так и есть, но вот как иначе выводить придумать не могу

[RidgeA]

предлагают использовать
https://router.vuejs.org/en/advanced/meta.html

а данные с бек-энда все-равно надо вытягивать, либо хранить в сторе

UPD:
https://router.vuejs.org/en/advanced/data-fetching.html

[Николай Семенов]

RidgeA: Спасибо вам за направления.
у меня в итоге получается такая вложенность #/menu/9/23
при такой нужно вывести название товара
при #/menu/9 - название категории

Answer 1

[Evgeny Kulakov]

Кажется это не совсем верный подход пытаться изменять $route.name.
В CategoriesPage скорее всего вы получаете список с категориями, сохраняйте этот список в стор, т.е. у вас должен быть объект типа:

categories: 
  [{id: 1, name: 'Категория 1'},
   {id: 2, name: 'Категория 2'},
   {id: 3, name: 'Категория 3'}]

Далее при нажатии на ссылку с определенной категорией передавайте в компонент CategoryPage id категории и в этом компоненте по id получайте из стора название категории и отображайте его. Аналогично в CategoryPage вы должны забирать с бэкэнда список товаров и отображать его, при нажатии на определенный товар передаете id этого товара в компонент, который будет отвечать за его отображение и в нем по этому id получаете название товара.

Comments

[Николай Семенов]

как получить название по id я понял, а как передать в store текущее состояние скажем переменной currentLocation

[Evgeny Kulakov]

Николай Семенов: Мм, здесь я предполагал, что используется vuex, смотрите как изменять state в нем: actions, commit, mutations, в документации все есть: https://vuex.vuejs.org/ru/intro.html

[Николай Семенов]

Evgeny Kulakov: аа пардон я маленько не так понял, я же по клику буду менять состояние.

все правильно предполагали по поводу state.

просто у меня еще один вариант крутится:
смысл такой что каждый отображаемый компонент содержит имя в data
например name: "Меню" или name: category.name или name: product.name
а метод в виде:

currentLocation() {
 $store.currentLocation = this.name

так вот когда пользователь заходит в этот компонент он передает свое имя в sate
только вот как инициировать передачу не могу понять
имеет право на жизнь такой вариант? если мне удалось передать его идею

[Evgeny Kulakov]

Наверное имеет, но это не очень хорошая реализация. Вы же не хотите в каждом компоненте реализовывать функционал по передаче имени этого компонента в стор.
Можно сделать миксин для этого функционала и внедрять его в каждый компонент, где требуется передача имени в стор, хотя это тоже оверхед определенный:

// mixin setLocation.js

export default {
 created() {
   this.$store.currentLocation = this.name
 }
}

// ... in some component

import locationMixin from 'path-to-mixins/setLocation'
export default {
  mixins: [locationMixin],
  ...

Но вообще, нужно понять что вы на самом деле хотите - отображать что-то типа хлебных крошек? Тогда стоит реализовать отдельный компонент для этого. Посмотрите вот эту реализацию, имхо, здесь достойно сделано: https://jsfiddle.net/Linusborg/fgporeLx/

[Николай Семенов]

Evgeny Kulakov: огромное спасибо за ссылочку, пример реализации хлебных крошек мне будет крайне полезе
отображать хочу название текущей страницы в приложении, вот само приложение.
Вместо location хочу отображать: название пункта меню, или название категории, или название товара, или и т.д. и т.п.

[Evgeny Kulakov]

Из примера, который я давал, вроде ясно как можно реализовать.
Смысл такой:

1. У вас есть компонент location, в него передаете текущий маршрут
2. У вас есть роутер, к нему привязан объект (meta в примере), который содержит отображаемое название для данного пути - для статических путей, либо геттер из стора и функцию, которая вернет имя из полученного геттером содержимого имя для отображения.

Когда происходит переход на какой-либо машрут, ваш location компонент берет из данного маршрута название, которое задано статически, либо, если привязан геттер, вызывает его, получает нужную информацию из стора(в вашем случае это должны быть геттеры получения текущей категории, названия товара и т.п.) и извлекает имя.

[Николай Семенов]

Evgeny Kulakov: сделал вот такой компонент:

<template>
    <div class="location-bar">
        <p class="location-name" v-if="!$route.meta.bcDynamic"> {{ $route.meta.location }} </p>
        <p class="location-name" v-if="$route.meta.bcDynamic"> {{ formattedValue }} </p>
    
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {

    beforeCreate() {
        this.$options.computed.value = function() { 
            if (this.$route.meta.bcGetter) {
                console.log(this.$route.meta.bcGetter);
                 return this.$store.state.categories.getters[this.$route.meta.bcGetter] 
            } else {
                 return null
            }
        }
    },
    computed: {
        formattedValue() { 
            console.log(this.value);
            return this.$route.meta.bcText(this.value) }
    },
     watch: {
  	    $route() { this.loadData() }
    },
    methods: {
        loadData() {
            this.$store.commit('setActiveCategory', {id: this.$route.params.categoryId})
        }
    }

}
</script>

в state категории во такой геттер:

// getters
const getters = {
    allCategories: state => state.all,
    activeCategory: (state, {activeCategoryId}) => {
        return state.all.find( (p) => p.id === activeCategoryId) || null
    }
}

возникает ошибка при рендере функции в beforeCreate() в консоле пишет:
Cannot read property 'activeCategory' of undefined"
если вывожу console.log(this.value);
пишет undefined
Пожалуйста помогите разобраться

[Evgeny Kulakov]

this.$store.state.categories.getters[this.$route.meta.bcGetter] - вот сюда скорее всего передается activeCategory и этот вызов undefined. Эта запись скорее всего неправильна, если у ваc не namespaced модули в vuex, то вызываем вот так: this.$store.getters[this.$route.meta.bcGetter].
Вот тут тоже скорее всего косяк:

activeCategory: (state, {activeCategoryId}) => {
        return state.all.find( (p) => p.id === activeCategoryId) || null
    }

Нужно:

activeCategory: (state) => {
        return state.all.find( (p) => p.id === state.activeCategoryId) || null
    }

[Николай Семенов]

Evgeny Kulakov: ьне кажется проблема в beforeCreate
он пытается получить категории когда еще не определен activeCategoryId
console.log(state.all.find( (p) => p.id === state.activeCategoryId));
выводит udefined

[Николай Семенов]

Evgeny Kulakov: debugger посмотрел в (p) => p.id всегда передается только первая категория
но что интересно если я даже выбираю первую категорию все равно возвращает undefined,
хотя на момент поиска activeCategoryId уже определена

[Evgeny Kulakov]

Возможно, трудно сказать не видя код. Может all пустой, может еще что-то. Посмотрите, что содержат переменные при вызове этого геттера и вызывается ли он вообще.

[Николай Семенов]

Николай Семенов: добил все-таки эту функцию, проблема была в том что this.$route.params.categoryId возвращает строку, а id был int. === сравнивает же без приведения типов. запарсил в инт this.$route.params.categoryId и все пошло на ура.
Спасибо вам огромное.
могу я куда нибудь на пиво перечислить?

[Evgeny Kulakov]

Отлично! Если настаиваете) https://money.yandex.ru/to/410011384408899