I have set multiple routes on one page, and I want to validate only one route I am using the following code:

beforeRouteEnter(to, from, next) {
      
    
      if(firstString=='a'||firstString=='A'){
        if(parseInt(substring1) > 219028 && parseInt(substring1) < 386817){
  console.log("Valid")
      }
      else{
        alert("Invalid Seat No...!!")
          next({
            path: '/'
          });
          this.$refs.seatno1.focus();
        }

    },

<router-link :to="'institute_details/' + seatno " class="btn btn-success" >
                  <span v-on:click.capture="validateData">LINK</span>
                </router-link>



<router-link :to="'institute_details/' + agriculture"  data-toggle="tooltip" title="agri" data-placement="right" class="btn btn-danger">Agri</router-link> 

I have set multiple routes on one page, and I want to validate only one route I am using the following code:

beforeRouteEnter(to, from, next) {
      
    
      if(firstString=='a'||firstString=='A'){
        if(parseInt(substring1) > 219028 && parseInt(substring1) < 386817){
  console.log("Valid")
      }
      else{
        alert("Invalid Seat No...!!")
          next({
            path: '/'
          });
          this.$refs.seatno1.focus();
        }

    },

<router-link :to="'institute_details/' + seatno " class="btn btn-success" >
                  <span v-on:click.capture="validateData">LINK</span>
                </router-link>



<router-link :to="'institute_details/' + agriculture"  data-toggle="tooltip" title="agri" data-placement="right" class="btn btn-danger">Agri</router-link> 

I want to validate "'institute_details/' + seatno " only.

• javascript
• vue.js

• Can i set to Parameter for particuler route? if yes then how i can set it? – user5532713 Commented Apr 18, 2017 at 5:27

1 Answer 1

First, you can use regex / dynamic patterns in your route syntax to match relevant address. That should cover most use cases.

In this simple example you can recover the parameter inside the ponent in this.$route.params.location.

new VueRouter({
  routes: [
    { path: 'institute_details/:location', ponent: somePage }
  ]
})

For more details about it (such as advanced regex use) see: https://router.vuejs/guide/essentials/dynamic-matching.html

Additionnaly, as you did, you can use the navigation guard, either globally or on a ponent level, to do some fancier tests, and reject the navigation if it does not please you. Just call next(false).

beforeRouteEnter (to, from, next) {
    if (to.params.location === 'you-shall-not-pass') {
        next(false);
    }
    else {
        next();
    }
}

See: https://router.vuejs/guide/advanced/navigation-guards.html