如何使用后退按鈕檢查用戶是否到達路線或 url？

Question

我需要做一些功能，特別是當用戶回到已經訪問過的頁面（歷史）時。如何做到這一點？

Answer 1

Considering your router is not configured in history mode because from vue router docs "history mode, which leverages the history.pushState API to achieve URL navigation without a page reload", You can hook into vue router event to save the previous url

router.beforeEach(async (to, from, next) => {
    previousRoutes.push(from)
    next()
})

更多信息在這里https://router.vuejs.org/guide/advanced/navigation-guards.html現在您可以檢查，如果用戶回來了，如果路由已經存在於 previousRoutes - 到一個已經訪問過的頁面。

Answer 2

我認為您無法確定用戶按下了back按鈕。

但是您可以保留訪問過的路線列表並檢查用戶是否去過該路線。

您可以使用vuex來存儲訪問過的路由，方法是添加一個突變以將新路由推送到它。

var store = new Vuex.Store({
  state: {
    visitedRoutes: [
    ]
  },
  mutations: {
     ADD_VISITED_PAGE (state, route) {
      // mutate state
      state.visitedRoutes.push(route)
    }
  }
})

並添加一個全局后掛鈎來觸發你的突變

router.afterEach( (to, from) => {
  store.commit('ADD_VISITED_PAGE', from)
})

之后，如果用戶訪問過該頁面，您可以簽入您的組件。

mounted () {
 if (this.$store.state.visitedRoutes.contains(this.$route.name)) {
   // you've been here before
 }
}