您可以在使用 Quasar Layout 架構路由時，受益於 Vue Router 的功能。以下資訊僅為建議，並非強制性要求。 Quasar 賦予您完全的自由。以下內容僅作為範例。
QLayout 是用於封裝頁面的元件，以便多個頁面可以共用相同的標頭、抽屜等。但是，您也可以設定每個頁面的標頭/頁尾/抽屜，但它們都必須是 QLayout 元件的子元件。為了理解這是如何運作的，您需要閱讀一些關於 Vue Router 巢狀路由。
為了更清楚說明，讓我們舉一個例子。我們有一個 layout（'user'）和兩個 page（'user-feed' 和 'user-profile'）。我們希望將網站/應用程式路由設定成這樣：/user/feed 和 /user/profile。
建立檔案
Quasar 不強制使用特定的資料夾結構。以下只是一個範例。您可以將 layout 和 page 放在同一個資料夾中，或將 page 放在您選擇的特定資料夾結構中，或建立您自己的 layout 和 page 資料夾。這對 Quasar 來說並不重要。重要的是您在 /src/router/routes.js 中正確地引用它們。
讓我們建立 layout 和 page 檔案。您可以使用 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上述命令會建立以下資料夾結構
定義路由
您的 Pages (/src/pages) 和 Layouts (/src/layouts) 透過 Vue Router 在 /src/router/routes.js 中注入到您的網站/應用程式中（並進行管理）。每個 Page 和 Layout 都需要在其中被引用。
使用延遲載入的 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 的延遲載入/程式碼分割。
提示
設定路由以使用 Layouts 和 Pages，基本上包括正確地巢狀路由，我們將在下一節中看到。
巢狀路由
實際的應用程式 UI 通常由多層巢狀的元件組成。網址的區段對應到特定巢狀元件結構也很常見，例如
/user/profile /user/posts
+------------------+ +-----------------+
| User | | User |
| +--------------+ | | +-------------+ |
| | Profile | | +------> | | Posts | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+使用 Vue Router，可以使用巢狀路由設定輕鬆表達這種關係。我們注意到一些事情：兩個 page 都需要由 User 元件包裝。嘿，User 元件然後就是一個 Layout！
由於 User layout 包裝了內部 page，因此它們需要一個注入點。這由 <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）。那麼我們現在如何將所有內容組合在一起呢？我們編輯路由檔案。在那裡，我們將設定路由，告知哪些元件是 Layouts，哪些是 Pages，並將它們引用/匯入到我們的應用程式中
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')
}
]
}
]請注意以下幾點
我們正在使用 layout 和 page 的延遲載入 (
() => 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'），這些別名在上面的範例中使用。
Layout 的 Pages 在 Vue Router 設定中被宣告為其子元件，以便
<router-view/>會知道要注入哪個 page 元件。請記住，每當您的 Layout 附加了 page 時，都要始終使用這個 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 文件，以充分理解上述範例以及如何為您的應用程式設定路由器及其路由。