如何设置Vue路线或覆盖后退按钮以像应用程序一样运行

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

本文介绍了如何设置Vue路线或覆盖后退按钮以像应用程序一样运行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在构建一个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路线或覆盖后退按钮以像应用程序一样运行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何设置Vue路线或覆盖后退按钮以像应用程序一样运行

基础教程推荐