javascript - 是否可以设置特定的 VueRouter 属性？

Question

使用 VueRouter，我想启用对这些 URL 的访问:

• 类别/苹果
• 类别/香蕉
• 类别/梨

是否可以将路由器参数限制为某些字符串？ (香蕉、苹果、梨)？

我在文档中找不到专门与此相关的任何内容。我用谷歌搜索找到了一些其他不起作用的解决方案:

{
    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