Question

我想获取vue-router中的上一页链接或URL。像这样怎么做？

const link = this.$router.getPrevLink(); // function is not exist?
this.$router.push(link);

附近的概念是this.$router.go(-1)。

this.$router.go(-1);

Answer 1

所有vue-router的navigation guards都将先前的路由作为from自变量..

每个警卫函数都接收三个参数：



to: Route：正在导航到的目标路由对象。



from: Route：当前正在导航的路线。



next: Function：必须调用此函数来解决该钩子。的   操作取决于提供给next的参数

作为示例，您可以使用组件内部导航保护beforeRouteEnter来获取先前的路线并将其存储在数据中。.

...
data() {
 return {
   ...
   prevRoute: null
 }
},
beforeRouteEnter(to, from, next) {
  next(vm => {
    vm.prevRoute = from
  })
},
...

然后，您可以执行this.$router.push(prevRoute)转到上一条路线，或访问this.prevRoute.path以获取先前的URL。

Answer 2

尽管this answer很不错，但在弹出状态导航（又名用户单击后退按钮）的情况下，接收的路线并非总是历史上的路线。

>

因此如果您使用Vuex ，以下是尊重此行为的代码段：

# gcc 11 nightly build -O3
conditional_load(std::atomic<bool>&):
        movzx   eax, BYTE PTR [rdi]
        test    al, al
        mov     eax, DWORD PTR g0[rip]
        cmove   eax, DWORD PTR g1[rip]
        ret

实施后，您可以为商店内的上一条路线定义吸气剂：

const store = new Vuex.Store({
  state: {
    routerHistory: [],
  },
});

const router = new VueRouter({
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    const fromHistory = Boolean(savedPosition);

    if (fromHistory && store.state.routerHistory.length > 0) {
      store.state.routerHistory.splice(-1, 1);
    } else {
      store.state.routerHistory.push(from);
    }

    return savedPosition || { x: 0, y: 0 };
  },
});

此代码使用scrollBehavior钩子，如果它是popstate导航，则该钩子仅会接收savedPosition参数。借助Vuex，我们可以将所有路由存储在一个数组中（跨多个页面）。

Answer 3

要将它直接从 $router 对象中取出，请在您的计算或方法中使用它：

lastRouteName: function() {
  let returnVal = '';

  const routerStack = this.$router.history.stack;
  const idx = this.$router.history.index;

  if (idx > 0) {
    returnVal = routerStack[idx - 1].name;
  }

  return returnVal;
}

这将返回路线名称，但您也可以根据需要返回 .path 或任何其他属性。

要检查历史对象，请执行 console.log(this.$router.history);

vue-router-如何获取上一页网址？

3 个答案: