I want to better control the page state with vue router. For example
/ will go to the home page./login will stay on the home page but open a dialog with the login box./register will open the same dialog but show a registration screen.How would this work?
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
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 useGuardif you can use different component for each route.
