处理后退按钮

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

TIP

如果您不了解Vue Router,我们强烈建议您先阅读并理解它的工作原理。

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'],

        // On the other hand, the following completely
        // disables Quasar's back button management.
        // Requires Quasar v1.14.1+
        // 另一方面,下面的设置完全禁用了
        // 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。我们将安装指令:

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

然后我们使用它:

<!-- 注销按钮 -->
<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>

WARNING

始终考虑如何将应用程序重定向到新路由,这具体取决于您想要实现的目标。考虑你真的想推送一个新的路由到窗口历史或想“取代”当前的路由。如果不取代,手机/平板电脑/浏览器的“返回”按钮将无法正常工作。它不会最终退出应用程序,它会让您按照与访问相反的顺序遍历所有路由。所以,当你回到登录页面时,你会希望又一次返回让App退出,但它可能会让你的App转到列表选项卡之一,这取决于用户的导航历史记录。

GoBack API

Loading API...
Please wait...