使用 Vue Router 进行页面路由

Quasar CLI with Vite - @quasar/app-vite

您会注意到您的 Quasar 项目中包含一个 /src/router 目录。这里包含您的网站/应用程序的路由配置：

“/src/router/index.js” 文件中处理 Vue Router 的初始化工作
“/src/router/routes.js” 文件中定义了您的网站/应用的路由表

WARNING

Quasar 文档假设您已经熟悉了 Vue Router。下面的内容描述了如何在 Quasar CLI 项目中使用路由。更多关于 Vue Router 本身的内容请参考 Vue Router 文档。

基本用法

您需要在 /src/router/routes.js 文件中导入您的网站/应用的页面和布局文件。更多信息参考使用页面和布局进行路由文档页面。

在使用 Pinia 时，不能直接从别的脚本中导入 store，但是在 /src/router/index.js 的导出函数中，可以通过参数访问它。例如，您可以利用 Router.beforeEach 来做登录验证：

import { defineRouter } from '#q-app'

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

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

TIP

如果您在开发 SSR 应用，您还可以在此访问 ssrContext 对象（服务端）。

基于文件名的路由
Vue Router v5+

如何启用

如果你想使用 Vue Router 的基于文件名的路由功能，而不是手动管理 /src/router/routes 文件，那么先停止开发服务器（如果正在运行），然后编辑：

build: {
  /**
   * 是否使用 Vue Router 的基于文件名的路由功能。
   * 设置为 `true` 或一个 vue-router/vite 插件的选项对象
   *（用于覆盖或补充默认选项）。
   *
   * 切换此选项后需要重启开发服务器和 IDE，
   * 或运行 "quasar prepare" 命令。
   *
   * @type boolean | VueRouterVitePluginOptions
   * @default false
   */
  filenameBasedRouting: true
}

你还需要编辑：

- import routes from './routes'
+ import { routes, handleHotUpdate } from 'vue-router/auto-routes'

export default defineRouter((/* { store, ssrContext } */) => {
  const Router = createRouter({
    routes,
    // 其余配置...
  })

+  // 启用热更新
+  if (import.meta.hot) {
+    handleHotUpdate(Router)
+  }

  return Router
})

请注意，切换此选项后需要重启开发服务器，或运行 “quasar prepare” 命令。之后你可能还需要重启 IDE。

目录结构

启用此功能后，你需要：

将 /src/pages 目录结构调整为符合 Vue Router 命名规范
删除 /src/router/routes.js|ts 文件
删除 /src/layouts 目录，因为它不再有用（或将其内容整合到 /src/pages 中）

以下是目录结构示例：

/src/

router/

index.js

# (或 .ts)

pages/

index.vue

# 路由 "/" 的布局

index/

(index).vue

# 路由 "/" 的页面

second.vue

# 路由 "/second" 的页面

admin.vue

# 路由 "/admin" 的布局

admin/

(index).vue

# 路由 "/admin" 的页面

account.vue

# 路由 "/admin/account" 的页面

默认选项

当 filenameBasedRouting 设置为 true 或提供了选项对象（覆盖或补充默认配置）时，以下是传递给 vue-router/vite 插件的默认选项：

{
  // 路径相对于：
  root: <项目根目录>,

  // 类型生成位置（TypeScript 项目）：
  dts: './src/typed-router.d.ts',
}

更多关于该对象的信息：Vue Router 配置。

发现错误？在浏览器中编辑此页

1. Introduction

2. 基本用法

3. 基于文件名的路由

3.1. 如何启用

3.2. 目录结构

3.3. 默认选项

基本用法

基于文件名的路由 Vue Router v5+

如何启用

目录结构

默认选项

基于文件名的路由
Vue Router v5+