CODEWITHSUNDEEP
javascripthtmlvue.js
user5532713
user5532713

Reputation:

Dynamic Router Path validation in vue

{path: '/institute_details/:id', component: require('./views/institutedetails/instdetails.vue')},

I want to validate id before redirect on path

{path: '/institute_details/:id', component: require('./views/institutedetails/instdetails.vue')},



methods: {   
      validateData() {
        var re = new RegExp("^[a-zA-Z][0-9]{6}$")
        var string1=this.seatno
        var vm=this
        if(this.seatno==' ' || this.seatno.length==0 ){
          this.seatno=''
          alert("Enter Your Seat Number...!")
          this.$refs.seatno1.focus();
        }else if(!re.test(string1)){
          this.seatno=''
          alert("Invalid...!")
          this.$router.push({path:'/' })
        }
      }
    }
<div class="btn_result">
  <span v-on:click="validateData">
    <router-link :to="'institute_details/' + seatno " class="btn btn-success">View Path
    </router-link>
  </span>
</div>

Upvotes: 0

Views: 2315

Answers (2)

Sumit
Sumit

Reputation: 24

If you want to switch only to particular route and apply logic on that add condition in statement if(to.fullPath.includes('/yoururl')) then next()

Upvotes: 0

D.jennis
D.jennis

Reputation: 199

You can use beforeRouteEnter hook in your component.

And its usage is specified in the official vue-router document.see vue-router document

Code Example in your component

export default {
    data() {
        // define your component's data here.
    },

    methods: {
        validateDate() {
            // function to valiate your data
        },
    },

    beforeRouteEnter(to, from, next) {
        // check before enter the route
        // if check failed, you can cancel this routing

        // fake code here
        const isCheckPassed = checkWithSomeLogic();

        if (isCheckPassed) {
            next();
        } else {

            // cancel this routing
            // or redirect to the page you want with next function
            next({
                path: 'route you want to redirect to',
                query: {
                    // your query params here
                },
            });
        }
    },
};

Hope it helps.

Upvotes: 2

Related Questions