CODEWITHSUNDEEP
javascriptvue.js
user5532713
user5532713

Reputation:

Validate Routes in vue

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.

Upvotes: 1

Views: 8965

Answers (1)

FitzFish
FitzFish

Reputation: 8629

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 component in this.$route.params.location.

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

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

Additionnaly, as you did, you can use the navigation guard, either globally or on a component 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.org/guide/advanced/navigation-guards.html

Upvotes: 7

Related Questions