NUXT - Route with dynamic path - multiple parameters

Question

I have a route path like the below

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

so this is some thing like this

http://localhost:3000/board/112233333333

Here in the above case

11 is dynamic value for type ( max two digits )

22 is dynamic value for sub type ( max two digits )

33333333 is dynamic value for id.

Could any one please let me know how do I create a folder structure for this one ? If not possible what is the best idea to handle this case ?

Solution

As per the details in your question,

1. Your url is http://localhost:3000/board/112233333333

2. The last param in route must have totally 12 digits (any random 12 digits)

112233333333 - 12 digits

We will work with below page structure to get to your final result

Use validate() in _id.vue to check if this route is a valid route.

1.validate() method has to return either true or 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

Comments

[Bujji]

Thanks for your answer . Last value "33333333" length is not fixed . Sorry I didn't mention it in the question . It has dynamic length from size 1 to Max integer size . But you gave me idea for the implementation . Do you have any quick fix for the last one ?

[divine]

try this regex /^([0-9]{2,2})([0-9]{2,2})([0-9]{1})$/; -- this will expect the last match to have minimum length 1 and maximum is as you wish.

[Bujji]

Thank You divine for the solution .

[Bujji]

small correction , right regular expression is /^([0-9]{2,2})([0-9]{2,2})([0-9]{1,99})$/