如何设置Vue路线或覆盖后退按钮以像应用程序一样运行 [英] How to set up Vue routes or override back button to function like an app

问题描述

我正在构建一个Cordova Vue应用程序。在许多情况下，有更深层次的链接，如下面的

/profile/:id/:contact_type/contacts:contact_id

首先位于/profile/:id的位置，然后单击链接转到/profile/:id/:contact_type/contacts:contact_id

如果您首先在配置文件页面上，则标准router.go(-1)工作正常。但如果您收到通知或其他信息，并且是从任何页面发送的，例如/settings/:id。后退按钮的行为应该更像向上按钮，按下后退按钮/profile/:id/:contact_type/contacts:contact_id应该会将您带到/profile/:id，而不是/settings/:id。 我怎么设置这个？我尝试了一些事情，比如在/上拆分当前路由并弹出它，然后加入并推送到那个位置。但这不适用于参数，特别是当参数超过1时。

const path = router.currentRoute.path
const URLSplit = path.split('/')
URLSplit.length = URLSplit.length - 1
const newTarget = URLSplit.join('/')
if (newTarget) {
  router.push(newTarget)
} else {
  router.push('/home')
}

我还尝试使用子路由，但这需要在每个页面中使用router-view，这不是我想要的操作。

我已经捕获了后退按钮操作，我只是想知道是否有办法设置VUE来执行这种后退操作，或者是否应该设置路由器来执行此操作，或者是否有函数可以计算出当前路由并转到它？

推荐答案

这听起来会违背在历史记录/访问过的页面之间导航的最初目的(而不是在路线中上一级)。

我会为此在应用程序中添加一个专用的后退按钮(就像Google应用程序确实有一个按钮一样)；否则，您可能必须尝试通过侦听当活动历史记录条目更改时触发的Window界面的popstate event来截取该特定按钮的浏览器默认行为。但如果必须这样做，可以使用Global Before (navigation) Guardsworkaround。

使用我前面提到的应用内后退(或者从技术上讲是"向上")按钮，您可以使用In-Component Guards。

例如，给定以下routes设置.

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/profile/:id',
      name: 'profile',
      component: Profile,

      children: [{
        path: ':contact_type/contacts:contact_id',
        name: 'contact',
        component: Contact
      }]
    }
  ]
})

.您可以直接在路由组件内定义路由导航保护(例如Contacts.vue)：

<template>
  <div>
    <router-link :to="{ name: 'profile' }">&lt;- back to profile</router-link>

    Some contact information.
  </div>
</template>

<script>
  export default {
    beforeRouteLeave(to, from, next) {
      if (from.name === 'contact' && to.name !== 'profile') {
        next({
          name: 'profile',
          params: {
            id: from.params.id
          }
        });
      }
      else {
        next();
      }
    }
  }
</script>

不一定是最佳方法，但应该可以。

这篇关于如何设置Vue路线或覆盖后退按钮以像应用程序一样运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！