Как использовать компонентную вложенность с vue-router?

Question

Как использовать компонентную вложенность с vue-router?

1

Я новичок в 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, имели синий фон), поэтому я хотел бы как-то создать "родительский" компонент, который будет определять материал, который одинаково для всех компонентов "детей". Что-то вроде:

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

Я знаю, что могу это сделать через "детей":

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

Но с этой конфигурацией существует основной маршрут path: '/', что совершенно неверно - я не хочу этого здесь - я не хочу, чтобы компонент Auth использовался автономно - я хочу, чтобы он был "обертка" для вложенных компонентов.

Каков наилучший способ решить эту проблему?

Martin Heralecký 15 сен. 2017, в 17:13

Источник

Теги:

javascript

vue.js

vue-router

vue-component

1 ответ

Ещё вопросы

Justin MacArthur · Accepted Answer · 2017-09-15T12-28-00.000Z

То, как я решил эту проблему, - это использовать перенаправление базового пути.

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

в вашем случае это будет

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

Это гарантирует, что

Что делать, если я хочу вложить другое представление как дочерний компонент компонента регистрации? С таким же подходом он показывает белый экран для меня