Блог

Главная - Вопросы по программированию - Возможно ли установить конкретные реквизиты VueRouter?

Возможно ли установить конкретные реквизиты VueRouter?

#javascript #vue.js #ecmascript-6 #vuejs2 #vue-router

#javascript #vue.js #ecmascript-6 #vuejs2 #vue-маршрутизатор

Вопрос:

Работая с VueRouter, я хочу включить вход по этим URL-адресам:

  • category/apple
  • category/banana
  • category/pear

Возможно ли ограничить параметр маршрутизатора определенными строками? (банан, яблоко, груша)?

Я ничего не могу найти в документации конкретно об этом. и я погуглил, чтобы найти некоторые другие решения, которые не работают: 

 {
    path:       'category/:categoryType',
    props:      true, 
    /*props: {
        validator: function (value) {
            return ( value === 'banana' || value === 'apple' || value === 'pear');
        }
    },*/
    component:  someComponent
},

Единственное решение, которое я могу придумать прямо сейчас, — это проверить это в created() внутри компонента.

Ответ №1:

Я думаю, что этот код является решением вашего случая:

 const allowedCategoryNames = ['apple', 'banana', 'pear'];
const categoryRoutePath = '/category/:categoryName('   allowedCategoryNames.join('|')   ')';
{
    path:       categoryRoutePath,
    props:      true,
    component:  someComponent
},

и в вашем компоненте вы можете получить текущее имя cutegory следующим образом:

 const currentCategory = this.$route.params.categoryName;

Это должно сработать =)
Некоторые примеры можно найти здесь: примеры регулярных выражений vue-router

Комментарии:

1. Если вы установите props: true , то параметры маршрута могут быть доступны с помощью this.categoryName .

2. разве я не могу просто добавить всю categoryRoutePath переменную в виде строки под path: ? Почему необходимо устанавливать его внутри переменной? (не тестировал это да, afk).

3. @wellhellothere, я протестировал приведенный выше код =) Конечно, вы просто можете добавить строковый литерал вместо переменной, но если вы расширите список названий категорий, вам нужно будет отредактировать путь маршрута. В любом случае, вы можете заменить path: categoryRoutePath на path: '/category/:categoryName(apple|banana|pear)' .