Question

我对Vue很陌生，我找不到如何使用嵌套组件和vue-router的好方法。

到目前为止（省略了一些不重要的代码）：

的index.html

<body>
    <div id="app">
        <router-view></router-view>
    </div>

app.js

const router = new VueRouter({
    routes: [{ path: '/login', component: Login }]
})

const app = new Vue({
    router,
}).$mount('#app')

组件/ Login.vue

<template>
    <h1>Please log in</h1>
</template>

这非常有效 - 我导航到/login，它会在h1标记中显示该消息。如果我创建了更多组件，例如Register或ResetPassword并将它们添加到路由器，它仍然可以正常运行。但问题是这些组件中有一些重复的代码（例如，我希望所有与auth相关的页面都有蓝色背景）所以我想以某种方式创建一个＆＃34;父母＆＃34;组件，它将为所有＆＃34;孩子定义相同的东西＆＃34;组件。类似的东西：

Auth component (makes the page-background blue)
    -> Login component (shows the login form)
    -> Register component (shows the registration form)

我知道我可以通过路线＆＃34;孩子＆＃34;来实现这一点：

const router = new VueRouter({
    routes: [
        { path: '/', component: Auth, children: [
            { path: '/login', component: Login }
            { path: '/register', component: Register }
        ]}
    ]
})

但是使用这种配置，主路线path: '/'，这是完全错误的 - 我不想在这里 - 我不希望Auth组件成为使用＆＃34;独立＆＃34; - 我希望它只是一个＆＃34;包装＆＃34;对于嵌套组件。

解决此问题的最佳方法是什么？

Answer 1

我解决此问题的方法是使用基本路径重定向。

{ path: '', redirect: '/to/path' },

在你的情况下它将是

const router = new VueRouter({
    routes: [
        {
            path: '/',
            component: Auth,
            children: [
                { path: '', redirect: '/login' },
                { path: '/login', component: Login },
                { path: '/register', component: Register }
            ]
        }
    ]
})

确保

如何使用vue-router组件嵌套？

1 个答案: