在使用 Quasar 布局构建路由时，您可以利用 Vue Router 的功能。以下信息仅供参考，并非强制要求。Quasar 允许您完全自由地进行操作。仅将以下行视为示例。
QLayout 是用于封装页面的组件，以便多个页面共享相同的头部、抽屉等。但是，您也可以为每个页面配置头部/页脚/抽屉，但它们都必须是 QLayout 组件的子组件。为了理解它是如何工作的，您需要阅读一些关于 Vue Router 嵌套路由 的内容。
为了更清楚地说明，让我们举个例子。我们有一个布局（“用户”）和两个页面（“用户提要”和“用户资料”）。我们希望像这样配置网站/应用程序路由：/user/feed 和 /user/profile。
创建文件
Quasar 不会强制使用特定的文件夹结构。以下是只是一个示例。您可以将布局和页面放在一个文件夹中，或者将页面放在您选择的特定文件夹结构中，或者创建您自己的布局和页面文件夹。这对 Quasar 来说并不重要。唯一重要的是您在 /src/router/routes.js 中正确引用它们。
让我们创建布局和页面文件。您可以使用 Quasar CLI 的助手命令，或者自己创建它们。
$ 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 Profile Posts
app:new Generated page: src/pages/Profile.vue +0ms
app:new Make sure to reference it in src/router/routes.js +2ms
app:new Generated page: src/pages/Posts.vue +1ms
app:new Make sure to reference it in src/router/routes.js +0ms以上命令创建以下文件夹结构
定义路由
您的页面（/src/pages）和布局（/src/layouts）通过 Vue Router 在 /src/router/routes.js 中注入到您的网站/应用程序（并进行管理）。每个页面和布局都需要在其中进行引用。
使用懒加载的 routes.js 示例
// we define our routes in this file
import LandingPage from 'pages/Landing'
const routes = [
{
path: '/',
component: LandingPage
}
]
export default routes使用按需加载的 routes.js 示例
// we define our routes in this file
const routes = [
{
path: '/',
component: () => import('pages/Landing')
}
]
export default routes提示
使用 @quasar/app-vite 或 @quasar/app-webpack 进行更深入的懒加载/代码分割分析。
提示
配置路由以使用布局和页面基本上包括正确嵌套路由，正如我们将在下一节中看到的。
嵌套路由
实际应用程序的 UI 通常由嵌套多层的组件组成。URL 的片段对应于嵌套组件的特定结构也很常见，例如
/user/profile /user/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+使用 Vue Router，使用嵌套路由配置来表达这种关系非常简单。我们注意到一些事情：这两个页面都需要由 User 组件包装。嘿，User 组件随后就是一个布局！
由于 User 布局包装了内部页面，因此它们需要一个注入点。这是由 <router-view> 组件提供的
<template>
<q-layout>
...
<!-- this is where the Pages are injected -->
<q-page-container>
<router-view></router-view>
</q-page-container>
...
</q-layout>
</template><template>
<q-page>
...page content...
</q-page>
</template>我们的示例指定了一些路由（/user/profile 和 /user/posts）。那么我们现在如何将所有内容整合在一起呢？我们编辑路由文件。在这里，我们将配置路由，说明哪些组件是布局，哪些是页面，并将它们引用/导入到我们的应用程序中
import User from 'layouts/User'
import Profile from 'pages/Profile'
import Posts from 'pages/Posts'
const routes = [
{
path: '/user',
// we use /src/layouts/User component which is imported above
component: User,
// hey, it has children routes and User has <router-view> in it;
// It is really a Layout then!
children: [
// Profile page
{
path: 'profile', // here it is, route /user/profile
component: Profile // we reference /src/pages/Profile.vue imported above
},
// Posts page
{
path: 'posts', // here it is, route /user/posts
component: Posts // we reference /src/pages/Posts.vue imported above
}
]
}
]
export default routes警告
请注意，以 / 开头的嵌套路径将被视为根路径。这允许您利用组件嵌套，而无需使用嵌套 URL。
我们的路由配置（/src/router/routes.js）应如下所示
export default [
{
path: '/user',
// We point it to our component
// where we defined our QLayout
component: () => import('layouts/user'),
// Now we define the sub-routes.
// These are getting injected into
// layout (from above) automatically
// by using <router-view> placeholder
// (need to specify it in layout)
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 } ] ]content_pasteQuasar 提供了一些开箱即用的 Webpack 别名（“layouts” 指向 “/src/layouts”，而 “pages” 指向 “/src/pages”），这些别名在以上示例中使用。
布局的页面在 Vue Router 配置中声明为其子页面，以便
<router-view/>知道要注入哪个页面组件。请记住，只要您的布局附加了页面，始终使用此 Vue 组件。<q-layout> ... <q-page-container> <!-- This is where your pages will get injected into your Layout --> <router-view /> </q-page-container> ... </q-layout>content_paste
提示
请查看 Vue Router 文档以充分理解以上示例以及如何为您的应用程序配置路由器及其路由。