Why donate
API Explorer
Upgrade guide
NEW!
The quasar.config file
Convert to CLI with Webpack
Browser Compatibility
Supporting TypeScript
Directory Structure
Commands List
CSS Preprocessors
Routing
Lazy Loading - Code Splitting
Handling Assets
Boot Files
Prefetch Feature
API Proxying
Handling Webpack
Handling process.env
State Management with Pinia
Linter
Testing & Auditing
Developing Mobile Apps
Ajax Requests
Opening Dev Server To Public
Quasar CLI with Webpack - @quasar/app-webpack
App Routing

You’ll notice that your Quasar project contains a /src/router folder. This holds the routing configuration of your website/app:

  • “/src/router/index.js” holds the Vue Router initialization code
  • “/src/router/routes.js” holds the routes of your website/app

WARNING

Quasar documentation assumes you are already familiar with Vue Router. Below it’s described only the basics of how to make use of it in a Quasar CLI project. For the full list of its features please visit the Vue Router documentation.

The /src/router/routes.js needs to import your website/app’s Pages and Layouts. Read more on Routing with Layouts and Pages documentation page.

When using Pinia the store is not directly importable from other scripts, but it is passed to the exported function of /src/router/index.js, so it can be accessed from there. For example you can use the Router.beforeEach method to check authentication in the router:

export default function ({ store /*, ssrContext */ }) {
  // ...
  const userStore = useUserStore(store)

  Router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth) && !userStore.isSignedIn) {
      next({ name: 'account-signin', query: { next: to.fullPath } })
    } else {
      next()
    }
  })
  // ...
}

TIP

If you are developing a SSR app, then you can check out the ssrContext Object that gets supplied server-side.