0

{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>

Improve this question

2 Answers 2

Reset to default
2

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

hi im using beforeRouteEnter(to, from, next) { axios.get(eventBus.apiURL+'result/' +this.seatno) .then(function (response) { console.log('RES' + response.data.scc_number) }).catch(error => { alert('Invalid') }) }, bt it shows error
Uncaught TypeError: Cannot read property 'seatno' of undefined
component's data is not accessable in beforeRouteEnter hook. As specified in official document: beforeRouteEnter (to, from, next) { // called before the route that renders this component is confirmed. // does NOT have access to 'this' component instance, // because it has not been created yet when this guard is called! },
beforeRouteEnter document
Or if you just want check data before routing. Just replace router-link element with Programmatic Navigation in your validateData function. In your validateData function, if validate passed, route to the path you want.If not, do nothing or give a tip to the user(for example). Programmatic Navigation Document.
|
0

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()

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.