[Vuejs]-How to open a dialog (setting component state) with vue router?

by

1👍

✅

Ideally, setting a component state from the router would be considered an anti-pattern. What you are looking for is meta fields.

You should let the component load but in created() hook or by observing the $route object injected in each component, read the meta config and then update the component’s state like:

const HomeComponent = Vue.component('home-comp', {

    // Other options...

    watch: {

        $route() {
            if (this.$route.meta.isLogin === true) {
                // Load Login Dialog Box
            } else if (this.$route.meta.isRegistration === true) {
                // Load User Registration Dialog Box
            }
        }
    }

});

Your router config would look like:

const router = new VueRouter({
    routes: [
        {
            path: '/login',
            component: HomeComponent,
            // a meta field
            meta: { isLogin: true },
            children: []
        },
        {
            path: '/register',
            component: HomeComponent,
            // a meta field
            meta: { isRegistration: true }
        },
        {
            path: '/',
            component: HomeComponent
        }
    ]
});

Alternately, you can go away the need for meta field. You can simply check the $route config for route name or check current URL and then make the decision.

TLDR; Handle this logic inside your HomeComponent. Or use Guard if you can use different component for each route.

👤Harshal Patil

2👍

you can create optional param in home page route

routes: [
  {
    path:'/:path?',
    name:'/home',
    component: Home
  }

and on Home Component (Or your main component) in mounted or created hook you can look for that param

created () {
  if (this.$route.params.path == 'login') {
    // dialog v-model to true
  }
}

if created has some issue with your implementation of dialog, mounted should work for you

👤Asim Khan

Leave a comment