Vue -router - How to get previous page url?

在Vue中，当使用Vue Router进行路由管理时，Vue Router实例并不直接提供获取上一页URL的内置方法。但是，你可以通过一些方法来实现这个需求。

方法一：使用浏览器的document.referrer

这是最简单的方法，可以直接通过JavaScript的document.referrer来获取上一个访问页面的URL。这个属性会返回当前页面之前的一个页面的URL，如果没有前一个页面则返回空字符串。

javascript
let previousUrl = document.referrer;
console.log(previousUrl); // 打印上一页的URL

方法二：监听路由变化并手动保存

Vue Router提供了导航守卫（navigation guards），你可以在这里监听路由的变化，并将当前路由保存下来，以便当路由变化时可以使用前一个路由。

1. 在你的主Vue实例中设置一个全局前置守卫：

javascript
// main.js 或 router/index.js

router.beforeEach((to, from, next) => {
  // 保存从哪个页面来
  localStorage.setItem('previousUrl', from.fullPath);
  next();
});

1. 在需要获取上一页URL的地方读取：

javascript
// 在组件中或其他任何需要的地方
let previousUrl = localStorage.getItem('previousUrl');
console.log(previousUrl);

方法三：使用Vuex进行状态管理

如果你的应用结构复杂，需要在多个组件间共享路由状态，可以考虑使用Vuex来管理这些状态。

1. 在Vuex中定义一个模块来存储路由状态：

javascript
// store.js

const store = new Vuex.Store({
  state: {
    previousUrl: ''
  },
  mutations: {
    setPreviousUrl(state, url) {
      state.previousUrl = url;
    }
  }
});

export default store;

1. 在全局前置守卫中更新状态：

javascript
router.beforeEach((to, from, next) => {
  store.commit('setPreviousUrl', from.fullPath);
  next();
});

1. 在组件中获取状态：

javascript
computed: {
  previousUrl() {
    return this.$store.state.previousUrl;
  }
}

以上是几种常见的方法来获取Vue中的上一页URL。根据你的具体需要和应用的复杂度，可以选择合适的方法实现。