Quasar
集成布局与路由器
您可以从Vue路由器的功能中受益，同时使用Quasar布局来构建路由。 下面的信息只是一个建议，不是强制性的。 Quasar允许你充分的自由。 仅以下面的几行为例。
布局是用于封装页面的组件，因此多个页面将共享相同的页眉、左侧/右侧等。 但是，您也可以配置每页页眉/页脚/左侧或右侧，但它们都必须是QLayout组件的子项。 为了理解这是如何工作的，你需要阅读Vue Router nested routes。
例子
为了更清楚一点，我们举个例子。 我们有一个布局（’user’）和两个页面（’user-feed’和’user-profile’）。 我们希望像这样配置网站/应用程序路由：/user/feed和/user/profile。
首先，我们创建布局和页面：$ quasar new layout user
app:new Generated layout: src/layouts/user.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
$ quasar new page user-feed user-profile
app:new Generated page: src/pages/user-feed.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
app:new Generated page: src/pages/user-profile.vue +1ms
app:new Make sure to reference it in src/router/routes.js +0ms
上述命令创建以下文件夹结构：src/
├── layouts
│ └── user.vue # 我们的QLayout定义文件
└── pages
├── user-feed.vue # /user/feed路由页面
└── user-profile.vue # /user/profile路由页面
我们的路由配置（/src/router/routes.js）应该如下所示：export default [
{
path: '/user',
// 将组件指向QLayout定义文件的目录
component: () => import('layouts/user'),
// 现在我们定义子路由。
// 通过使用<router-view>占位符
//（需要在布局中指定它）,
// 这些子路由正在自动注入（上面的）布局
children: [
{
path: 'feed',
component: () => import('pages/user-feed')
},
{
path: 'profile',
component: () => import('pages/user-profile')
}
]
}
]
请注意一些事情：
我们使用延迟加载的布局和页面（
()=> import(<path>)）。 如果你的网站/应用程序很小，那么你可以不使用延迟加载，因为使用它可能会增加比它的价值更多的开销：import UserLayout from 'layouts/user'
import UserFeed from 'pages/user-feed'
import UserProfile from 'pages/user-profile'
export default [
path: '/user',
component: UserLayout,
children: [
{ path: 'feed', component: UserFeed },
{ path: 'profile', component: UserProfile }
]
]Quasar提供了一些开箱即用的Webpack别名（’layouts’和’pages’），已用在上面的例子中。
布局的页面在Vue路由配置中声明为它的子元素，以便
<router-view />知道要注入哪个页面组件。 请记住，只要您的布局附有页面，始终使用此Vue组件。<q-layout>
...
<q-page-container>
<!--
这里你的页面注入到你的布局的地方
-->
<router-view />
</q-page-container>
...
</q-layout>
阅读所有Vue Router文档以充分理解上述示例以及如何为您的应用配置路由器及其路由。