NUXT - 带动态路径的路由 - 多个参数

Question

我有一个像下面这样的路线

path:'/ board /:type(\ d {2}):subtype(\ d {2}):id(\ d +)'

所以这就是这样的事情

HTTP://本地主机:3000 /板/ 112233333333

在上面的例子中

11是类型的动态值 (最多两位数)

22是子类型的动态值(最多两位数)

33333333是id的动态值.

任何人都可以告诉我如何为这个创建一个文件夹结构？如果不可能,处理这种情况最好的想法是什么？

Answer 1

根据你问题的细节,

1. 你的网址是 http://localhost:3000/board/112233333333

2. 路线中的最后一个参数必须有12位数(任意随机的12位数)

112233333333 - 12位数字

我们将使用以下页面结构来获得您的最终结果

使用 validate()的_id.vue检查,如果这条路是一个有效的途径.

1. validate()方法必须返回true或false

export default {
    validate ({ params }) {
        return /^([0-9]{12,12})$/.test(params.id)
    }    
}

2. params.id在validate()方法中将保存id (url param中的值),在你的情况下是112233333333

3. /^([0-9]{12,12})$/.test(params.id)将返回true如果ID (以URL参数值的方式),由12位数字否则返回false

true - 路线将成功加载

false- 将显示错误页面(找不到404页面 - 因为无法识别路线)

如果validate方法返回true,则表示允许加载页面.现在我们必须使用vuejs生命周期钩子继续进行.

1.在created()生命周期钩子中,使用从URL中提取值this.$route.params.id

2. this.$route.params.id使用正则表达式分离值.使用匹配方法分组为您需要的格式.在您的情况下,您已将其拆分为2,2,8位数.以下代码段中的正则表达式就是这样做的

created(){

    var _id = this.$route.params.id;
    var regex = /^([0-9]{2,2})([0-9]{2,2})([0-9]{8,8})$/;
    var contents = _id.match(regex);

    this.type = contents[1];
    this.subtype = contents[2];
    this.id = contents[3]; 
}

现在,您可以在正确验证后获得所需的所有值.你可以忽略它中的值contents[0].

下面是测试我在这里描述的方法的代码.

将代码放在_id.vue文件中并验证结果.

/* template code */
<template>
  <section>
    <h3>in board _id</h3>    
    <div>
        <div>type = {{type}}</div>
        <div>subtype = {{subtype}}</div>
        <div>id = {{id}}</div>
        <div>urlParam = {{$route.params}}</div>
    </div>
  </section>
</template>

/* script */
<script>
export default {
    /* variables */
    data(){
        return{
            type : null,
            subtype : null,
            id : null
        }
    },
    /* route validation */
    validate ({ params }) {
        return /^([0-9]{12,12})$/.test(params.id)
    },
    /* extracting url params */
    created(){
        var _id = this.$route.params.id;
        var regex = /^([0-9]{2,2})([0-9]{2,2})([0-9]{8,8})$/;
        var contents = _id.match(regex);
        this.type = contents[1];
        this.subtype = contents[2];
        this.id = contents[3]; 
    }
}
</script>

参考 https://nuxtjs.org/api/pages-validate