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

我是Vue的新手，我无法找到一个很好的方式来与vue-router一起使用嵌套组件。如何使用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')

组件/登录.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组件被“独立”使用 - 我希望它仅仅作为嵌套组件的“包装器”。

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

来源

2017-09-15 Martin Heralecký

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

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

你的情况这将是

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

这确保了

来源

2017-09-15 15:23:46

如果我想窝另一种观点为寄存器组件的子？使用相同的方法，它为我显示白色屏幕 –

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

回答

相关问题