验证Vue中的路线

Question

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.

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 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/en/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/en/advanced/navigation-guards.html