[Vuejs]-Dynamic Router Path validation in vue

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.

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

👤Sumit

Leave a comment