NUXT-具有动态路径的路线-多个参数

根据您问题的详细信息，

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 in validate() method will hold the id (value in url param) , in your case it is 112233333333

3./^([0-9]{12,12})$/.test(params.id) will return true if id (value in url param) has 12 digits else return false

true - route will be loaded successfully

false - error page will be displayed (404 page not found - because route was not recognized)

if true is returned by the validate method then this means the page is allowed to be loaded. Now we have to make use of vuejs life cycle hooks to proceed further.

1.In the created() life cycle hook, extract the value from the url using this.$route.params.id

2.Split the value this.$route.params.id using regex. Use match method to group into the format you need. In your case you have split it into 2,2,8 digits. The regex in below snippet exactly does that

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]; 
}

Now you have all the values you need after proper validation. Your can ignore the value in contents[0].

Below is the code for testing the approach i have described here.

Place the code in _id.vue file and verify the results.

/* 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>

Reference https://nuxtjs.org/api/pages-validate