您可以从Vue Router的功能中受益，同时使用Quasar布局来构建路由。 下面的信息只是一个建议，不是强制性的。 Quasar允许你充分的自由。 仅以下面的几行为例。

QLayout是用于封装页面的组件，因此多个页面将共享相同的页眉、侧滑菜单等。 但是，您也可以配置每页页眉/页脚/侧滑菜单，但它们都必须是QLayout组件的子项。 为了理解这是如何工作的，你需要阅读Vue Router嵌套路由。

为了更清楚一点，我们举个例子。 我们有一个布局（‘user’）和两个页面（‘user-feed’和’user-profile’）。 我们希望像这样配置网站/应用程序路由：/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/
├── layouts
│   └── User.vue         # 我们的QLayout定义文件
└── pages
    ├── Posts.vue        # /user/feed路由页面
    └── Profile.vue      # /user/profile路由页面

定义路由

您的页面（/src/pages）和布局（/src/layouts）通过/src/router/routes.js的Vue Router注入到您的网站/应用程序中（也受管理）。 每个页面和布局都需要在此引用。

routes.js示例：

// 我们在此文件中定义路由

import LandingPage from 'pages/Landing'

const routes = [
  {
    path: '/',
    component: LandingPage
  }
]

export default routes

使用延迟加载/按需加载的routes.js示例：

// 我们在此文件中定义路由

const routes = [
  {
    path: '/',
    component: () => import('pages/Landing')
  }
]

export default routes

嵌套路由

真正的应用程序用户界面通常由嵌套在多个级别的组件组成。 URL的段对应于嵌套组件的某种结构也很常见，例如：

/user/profile                   /user/posts
+------------------+            +-----------------+
| User             |            | User            |
| +--------------+ |            | +-------------+ |
| | Profile      | |  +------>  | | Posts       | |
| |              | |            | |             | |
| +--------------+ |            | +-------------+ |
+------------------+            +-----------------+

使用Vue Router的嵌套路由配置表达这种关系非常简单。 我们注意到一些事情：两个页面都需要由用户组件包装。 嘿，用户组件才是布局！

由于用户布局会包装内部页面，因此它们需要一个注入点。 这由<router-view>组件提供：

<!-- /src/layouts/User.vue -->
<template>
  <q-layout>
    ...

    <!-- 这是页面被注入的地方 -->
    <q-page-container>
      <router-view></router-view>
    </q-page-container>

    ...
  </q-layout>
</template>

<!-- /src/pages/Profile.vue 或 Posts.vue -->
<template>
  <q-page>
    ...page content...
  </q-page>
</template>

我们的示例指定了一些路由（/user/profile和/user/posts）。 那么我们现在如何将所有内容放在一起？ 我们编辑路由文件。 在这里，我们将配置路由，告诉哪些组件是布局，哪些是页面，并将它们引用/导入到我们的应用程序中：

// src/router/routes.js

import User from 'layouts/User'
import Profile from 'pages/Profile'
import Posts from 'pages/Posts'

const routes = [
  {
    path: '/user',

    // 我们使用上面导入的/src/layouts/User组件
    component: User,

    // 嘿，它有子路由，并且在它里面用户具有<router-view>；
    // 那真的是一个布局！
    children: [
      // Profile page
      {
        path: 'profile', // 在这里，路由/user/profile
        component: Profile // 我们参考上面导入的/src/pages/Profile.vue
      },

      // Posts page
      {
        path: 'posts', // 在这里，路由/user/posts
        component: Posts // 我们参考上面导入的/src/pages/Posts.vue
      }
    ]
  }
]

export default routes

我们的路由配置（/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别名（指向’/src/layouts’的“布局”和指向’/src/pages’的“页面”），已用在上面的例子中。

• 布局的页面在Vue Router配置中声明为它的子元素，以便<router-view />知道要注入哪个页面组件。 请记住，只要您的布局附有页面，始终使用此Vue组件。

  <q-layout>
    ...
    <q-page-container>
      <!--
        这是你的页面将被注入
        你的布局的地方 
      -->
      <router-view />
    </q-page-container>
    ...
  </q-layout>