是否可以设置特定的 VueRouter 道具？

Question

使用 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() 中验证这一点。

Answer 1

我认为这段代码是你的情况的解决方案：

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

在您的组件中，您可以像这样获得当前的可爱名称：

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

应该可以的 =) 一些例子可以在这里找到：vue-router regexp examples