处理后退按钮

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

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

导航场景

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

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

<!-- 登录按钮 --> 
<q-btn @click="$router.push('/list')">Login</q-btn>

<!-- 注销按钮 -->
<q-btn @click="$router.push('/login')">Logout</q-btn>

现在你建立你的应用程序并将其安装在手机上。 你打开应用程序，点击登录然后注销，然后按手机的后退按钮。 你最想要的就是让你的应用在这个时候退出……但它不会！ 它转到“/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。

首先，我们安装指令。 编辑/quasar.conf.js：

framework: {
  directives: ['GoBack']
}

然后我们使用它：

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

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

浏览器怪异行为

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

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

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

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

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

下拉刷新 上下文菜单