Question

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

position:fixed将转到主页。
/将保留在主页上，但打开带有登录框的对话框。
/login将打开相同的对话框，但显示注册屏幕。

这将如何工作？

Answer 1

理想情况下，从路由器设置组件状态将被视为反模式。您正在寻找的是meta fields。

您应该让组件加载，但是要挂起created()钩子，或者观察每个组件中注入的$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；在您的HomeComponent中处理此逻辑。如果您可以为每个路线使用不同的组件，请使用Guard。

Answer 2

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

consumerWindowSize

在已安装或创建的挂钩中的Home Component（或您的主要组件）上，您可以查找该参数

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

如果创建的对话框的实现存在问题，则挂载对您来说应该工作

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

2 个答案: