Adding Pages and Layouts
Your Pages (/src/pages
) and Layouts (/src/layouts
) are injected into your website/app (and also managed) through Vue Router in /src/router/routes.js
. Each Page and Layout needs to be referenced there.
You may want to read Routing first and also understand Lazy Loading / Code Splitting.
Example of routes.js
:
// we define our routes in this file |
Example of routes.js
using lazy-loading / on-demand loading:
// we define our routes in this file |
Configuring routes to use Layouts and Pages basically consists of correctly nesting routes, as we’ll see in the next section.
Nested Routes
Real app UIs are usually composed of components that are nested multiple levels deep. It is also very common that the segments of a URL corresponds to a certain structure of nested components, for example:
/user/profile /user/posts |
With Vue Router, it is very simple to express this relationship using nested route configurations. We notice some things: both pages need to be wrapped by a User component. Hey, User component is then a Layout!
Let’s create these files:
$ quasar new layout User |
Since User layout wraps inner pages, they need an injection point. This is supplied by the <router-view>
component:
<!-- /src/layouts/User.vue --> |
<!-- /src/pages/Profile.vue or Posts.vue --> |
Our example has some routes specified (/user/profile and /user/posts). So how can we put everything together now? We edit the routes file. That’s where we will configure routes, tell which components are Layouts and which are Pages and also reference/import them into our app:
// src/router/routes.js |
Note that nested paths that start with /
will be treated as a root path. This allows you to leverage component nesting without having to use a nested URL.
For further in-detail reading please take a look on Vue Router documentation.