Question

与VueRouter一起使用时，我想启用对这些URL的进入：

category/apple
category/banana
category/pear

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

我在文档中找不到与此有关的任何内容。我在Google上找到了其他无效的解决方案：

{
    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

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

1 个答案: