Vue.js 如何使用vue路由器打开对话框（设置组件状态）？

我想用vue路由器更好地控制页面状态。比如说

• /

  将转到主页

• /login

  将保留在主页上，但会打开一个带有登录框的对话框

• /register

  将打开同一对话框，但显示注册屏幕

---

这将如何工作？

理想情况下，从路由器设置组件状态将被视为反模式。你要找的是

您应该让组件在

created（）

hook中加载，或者通过观察每个组件中注入的

$route

对象，读取元配置，然后更新组件的状态，如：

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

});

您的路由器配置如下所示：

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
        }
    ]
});

或者，您可以不需要

meta

字段。您只需检查路由名称的

$route

配置，或检查当前URL，然后做出决定

TLDR；在

家庭组件中处理此逻辑。如果可以为每条路线使用不同的组件，则可以使用
Guard

理想情况下，从路由器设置组件状态将被视为反模式。你要找的是

您应该让组件在
created（）
hook中加载，或者通过观察每个组件中注入的
$route
对象，读取元配置，然后更新组件的状态，如：

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

});

您的路由器配置如下所示：

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
        }
    ]
});

或者，您可以不需要
meta
字段。您只需检查路由名称的
$route
配置，或检查当前URL，然后做出决定

TLDR；在
家庭组件中处理此逻辑。如果可以为每条路线使用不同的组件，则可以使用
Guard

您可以在主页路由中创建可选参数

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

在挂载或创建的钩子中的主组件（或主组件）上，您可以查找该参数

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

如果created对您的对话框的实现有一些问题，那么mounted应该适合您
您可以在主页路径中创建可选参数

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

在挂载或创建的钩子中的主组件（或主组件）上，您可以查找该参数

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

如果created对对话框的实现有一些问题，那么mounted应该适合您