Question

我正在构建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来执行这种后退操作，或者是否有办法我应该设置路由器来执行此操作，还是可以找出当前路线并向上导航的功能？

Answer 1

听起来这可能会打败在历史/已访问页面之间导航的原始目的（而不是在路线中上移一层）。

我会为此添加一个专用的应用内后退按钮（例如Google应用程序确实有一个）；否则，您可能必须尝试通过监听Window界面的popstate event来拦截特定按钮的浏览器默认行为，该界面在活动历史记录条目更改时会触发。但是，如果必须的话，可以使用workaround使用Global Before (navigation) Guards。

使用我之前提到的应用内返回（或技术上为“向上”）按钮，您可以使用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路线或覆盖后退按钮以像应用程序一样运行

1 个答案: