在编写用于构建移动应用和网站的可重用代码时，了解如何处理“返回”按钮很重要。更具体地说，如何管理布局/页面上的按钮，使您的应用“返回”到上一个页面。

GoBack API

Cordova/Capacitor

Quasar默认情况下会为您处理后退按钮，因此它可以隐藏任何打开的模态框/对话框而不是默认行为，后者会返回上一页（这不是很好的用户体验）。

同样，当在根路由（/）上并且用户按下电话/平板电脑上的后退按钮时，Quasar会使您的应用退出。 如果您希望禁用或配置此行为，那么可以通过quasar.conf.js的选项来做到这一点：

• false将禁用该功能；
• 如果历史记录长度为0，则'*'将使应用程序退出任何页面；
• 字符串数组（例如['login', 'home', 'my-page']）将使应用程序退出（或默认为/），当当前路径包含在该数组中时。数组会自动筛选出非字符串或空值，并将路径规范化以匹配#/<your-path>格式。

// 对于Cordova（仅限！）:
return {
  framework: {
    config: {
      cordova: {
        // Quasar在手机回退按钮上处理应用程序退出。
        // Quasar v1.9.3+使用true/false，v1.12.6+使用'*'通配符和数组值
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另一方面，下面的设置完全禁用了
        // Quasar的后退按钮管理。
        // 需要Quasarv1.14.1+
        backButton: true/false
      }
    }
  }
}

// 对于Capacitor（仅限！）
return {
  framework: {
    config: {
      capacitor: {
        // Quasar在手机回退按钮上处理应用程序退出。
        // Quasar v1.9.3+使用true/false，v1.12.6+使用'*'通配符和数组值
        backButtonExit: true/false/'*'/['/login', '/home', '/my-page'],

        // 另一方面，下面的设置完全禁用了
        // Quasar的后退按钮管理。
        // 需要Quasarv1.14.1+
        backButton: true/false
      }
    }
  }
}

导航场景

考虑这种情况：我们有一个包含两页（两条路由）的应用程序：一个登录页面（路径“/”）和另一个页面，这个页面有在多个布局选项卡上的项目列表 - 从现在开始，我们称之为“列表页面” ，其中每个选项卡都有类似“/list/shoes”，“/list/hats”的路由。登录页面重定向到列表页面，列表页面有一个“注销”按钮，用于将用户重定向到登录页面。

你将如何处理这种情况？通常情况下，你会为登录和注销按钮编写如下代码（我们不会详细讨论处理登录信息和与服务器通信的细节，因为这不是我们的讨论范围）：

<!-- 登录按钮 --> 
<q-btn to="/list" label="Login" />

<!-- 注销按钮 -->
<q-btn to="/login" label="Logout" />

现在你建立你的应用程序并将其安装在手机上。 你打开应用程序，点击登录然后注销，然后按手机的后退按钮。 你最想要的就是让你的应用在这个时候退出…但它不会！ 它转到“/list”路由。 这有一个很明显的原因。 当您点击按钮时，网络历史记录会建立起来：

# 启动应用
--> window.history.length is 1

# 点击登录按钮
--> window.history.length is 2

# 点击注销按钮
--> window.history.length is 3!

你想要的是，当你点击注销按钮时，window.history.length再次为1。 Quasar可以为你自动处理。 阅读关于v-go-backVue指令的内容。

指令v-go-back

让我们重写Logout按钮，让它按照我们实际希望的方式进行工作，即让window.history.length再次成为1。我们将安装指令：

<!-- 注销按钮 -->
<q-btn
  v-go-back=" '/' "
  color="primary"
  label="Logout"
/>

该指令确定平台是否为Cordova或Capacitor，如果是，则执行window.history.back()调用而不是$router.push（'/'）。

浏览器怪异行为

现在您可能会认为一切都会顺利进行，但您必须小心应用程序如何堆叠窗口历史记录。请记住，我们开始时说列表页面有一个带有多个选项卡的布局，每个选项卡都有自己的路由（“/list/shoes”，“/list/hats”）。如果我们在你的选项卡上使用to ="/list/shoes"和to ="/list/hats"（阅读关于QTabs的更多信息），那么当切换标签时，窗口历史将会建立起来。

应用程序的这种不正确行为是由于Vue Router默认情况下将路由推送到历史记录。相反，即使路由改变，您的窗口历史记录长度也会保持不变。幸运的是，Vue Router使用replace属性来救援，它实质上取代了当前的路由，而不是将它作为新的路由。

因此，除了to="/some/route"你应该添加replace属性（变成to="/some/route" replace）。这将取代窗口历史记录中的当前路由而不是推送它。

这同样适用于<router-link>。