使用布局和页面进行路由

您可以从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

TIP

在使用@quasar/app-vite@quasar/app-webpack的延迟加载/代码拆分中有更深入的分析。

TIP

配置路由以使用“布局”和“页面”基本上包括正确嵌套的路由,这将在下一节中看到。

嵌套路由

真正的应用程序用户界面通常由嵌套在多个级别的组件组成。 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

WARNING

请注意,以/开头的嵌套路径将被视为根路径。 这使您可以利用组件嵌套,而不必使用嵌套的URL。

我们的路由配置(/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>
    

TIP

请查看[Vue Router](https://router.vuejs.org/)文档,以全面了解上述示例以及如何为您的应用配置路由管理器及其路由。