从 Vue.js 中的 Route 获取上一个 URL答案

【问题标题】：Get Previous URL from Route in Vue.js从 Vue.js 中的 Route 获取上一个 URL
【发布时间】：2019-08-30 03:20:02
【问题描述】：

我有一条路线。如果用户没有登录，它会将他们重定向到登录页面。我正在尝试获取用户来自的路线，以便在他们登录后将他们重定向回来。

这是我的路线：

{
  path: '/builder/:pin?',
  name: 'Builder',
  component: Builder,
  props: true,
  meta: {
    requiresAuth: true, roles: ['XXXX', 'XXXX', 'XXXX']
  }
}

router.beforeEach((to, from, next) => {
  // check to see if router requires auth
  if (to.meta.requiresAuth) {
    let user = store.getters.getUser
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        if(!user.emailVerified) {
          next({ name: 'Login' })
          store.dispatch('setLoginFeedback', {code: 'resubmit-verification', message: 'Your email is not verified'})
          return
        }
        // get current user
        let ref = db.collection('users').where('email', '==', user.email)
        ref.get().then(snapshot => {
          if (!snapshot.empty) {
            snapshot.forEach(doc => {
              this.user = doc.data()
              // if no roles are set
              if(!to.meta.roles) {
                next()
              } else if(to.meta.roles) {
                const hasRole = this.user.roles.find(val => to.meta.roles.includes(val))
                if (hasRole) {
                  next()
                } else {
                  alert('you do not have permission to enter')
                }
              } else {
                // next({ name: 'Dashboard' })
              }

            })
          } else {
            // no user
            // if (!this.user) {
              next({ name: 'Login' })
            // }
          }
        })
      } else {
        next({ name: 'Login' })
      }
    })
  } else {
    // console.log('does not require auth')
    next()
  }


})

在我的登录组件中，我有以下代码：

beforeRouteEnter(to, from, next) {
    next((vm) => {
        vm.prevRoute = from;
    });
    console.log(to, from, next)
},

我目前在本地服务器上。当我转到localhost:8080/builder 时，它会将我正确重定向到登录但在控制台中。我得到这个来自

{name: null, meta: {}, path: "/", hash: "", query: {}, …}

为什么路径中没有/builder？

【问题讨论】：

您可以添加您用于重定向的代码吗？
@EderChrono 当然，我刚刚添加了它

标签： javascript vue.js vuejs2 vuex vue-router

【解决方案1】：

你可以这样做..

this.$router.back();

这将带你回到上一条路线

程序化导航 | Vue路由器https://router.vuejs.org/guide/essentials/navigation.html

【讨论】：

是否可以检查是否可以返回？如果您刚刚进入一个页面并且之前的路线不存在怎么办？喜欢try{ this.$router.back() } catch { console.log("not possible"}

【解决方案2】：

您用来重定向到登录页面的next({ name: 'Login' }) 调用似乎没有修改from 属性。那是因为你是“内部”路由，它不同于拨打router.push 电话。

进行这种重定向的最简单方法可能是使用查询参数：

next({
  name: "bar",
  query: { redirect: to.fullPath }
});

然后在您的组件$route.query.redirect 或路由器导航保护from.query.redirect 中访问它。

【讨论】：

【解决方案3】：

要返回上一条路线，您可以使用

this.$router.go(-1)

vue 维护以前访问过的路线的历史记录。

-1 表示返回一条记录。

见https://router.vuejs.org/guide/essentials/navigation.html#router-go-n

【讨论】：