添加页面和布局

你的页面（/src/pages）和布局（/src/layouts)通过/src/router/routes.js中的Vue路由器注入到你的网站/应用中（也是被管理的）。每页和布局都需要在那里引用。

您可能首先要阅读路由，并了解延迟加载/代码拆分。

routes.js的例子：

// 在这个文件里我们定义我们的路由

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

使用布局和页面配置路由基本在于正确地嵌套路由，我们将在下一节中看到。

嵌套路由

真正的应用程序用户界面通常由嵌套多层次的组件组成。 URL的片段与嵌套组件的特定结构相对应也很常见，例如：

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

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

我们来创建这些文件：

$ 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

由于用户布局包装内页，他们需要一个注入点。这由<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>
    ...页面内容...
  </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,

  // 嘿, 它有子路由并且User里面有<router-view>;
  // 然后它确实是一个布局了!
    children: [
    //Profile页面
      {
        path: 'profile',// 这里定义路由/user/profile
        component: Profile// 我们指向上面导入的/src/pages/Profile.vue
      },

    //Posts页面
      {
        path: 'posts',// 这里定义路由/user/posts
        component: Posts// 我们指向上面导入的/src/pages/Posts.vue
      }
    ]
  }
]

export default routes

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

如需进一步详细了解，请查看Vue路由器文档。

路由 延迟加载 - 代码拆分