Pass data into router-view to conditionally redirect - Vue Router

Viewed 13

I'm wanting to conditionally redirect to a page based on a user's settings.

I have my app where I've passed the user's setting:

<div id="app">
    {{ $defaultStartingPage }} <!-- 'search-page' -->
    <router-view></router-view>
</div>

I'd like to pass the $defaultStartingPage into my router-view and then handle it there, something like <router-view default-starting-page="{{ $defaultStartingPage }}"> but so far I haven't been able to.

I was able to set the variable to the window in my app.js file and then do this, but it's not reactive and it doesn't feel right.

export default {
    routes: [
        {
            path: '/',
            name: 'home',
            redirect: () => {
                if (window.defaultStartingPage) {
                    switch (window.defaultStartingPage) {
                        case 'service-appointments':
                            return { name: 'services-appointments' };
                    }
                }

                return { name: 'services-repairs' };
            },
        }
    ]
}

Is there a way to pass attributes to router-view and then access them when returning views? Or maybe a better way to do this?

Thanks!

0 Answers
Related