Route lost after uniapp refresh

When using uniapp to develop applications, we often encounter the problem of route loss after page refresh. This problem is very common in development, but it is not very difficult to solve. This article will delve into the causes and solutions to this problem.

1. Why does the problem of route loss occur?

In uniapp, we use vue-router for routing management. In vue-router, routing management is implemented through the browser's URL address. When we refresh the page, the browser will reload the page and also refresh the URL address, which leads to the problem of routing loss.

In order to better understand this problem, we can first take a look at the routing mode of vue-router. vue-router provides two routing modes: hash and history. The hash pattern refers to the part of the URL address starting with the # symbol, for example: http://example.com/#/home. The history mode refers to the part of the URL address that does not contain the # symbol, for example: http://example.com/home.

In hash mode, routing management is implemented through window.location.hash. When refreshing the page, the browser reloads the page and window.location.hash does not change, so the routing information is not lost. In history mode, routing management is implemented through window.location.pathname. When refreshing the page, the browser will reload the page and window.location.pathname will change, which leads to the problem of routing information being lost.

2. How to avoid the problem of route loss?

In order to avoid the problem of route loss, we can take the following measures:

1. Force the use of hash mode

In uniapp, we can pass in main Set the mode attribute in .js to force the use of hash mode. The sample code is as follows:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  mode: 'hash', // 强制使用hash模式
  render: h => h(App)
})

2. Save routing information before page refresh

We can store routing information in localStorage in the window.onbeforeunload event. The code example is as follows:

mounted() {
  // 监听onbeforeunload事件，保存路由信息
  window.onbeforeunload = () => {
    localStorage.setItem('lastRoute', this.$route.fullPath)
  }
}

After the page is loaded, we can determine whether we need to jump to the previous routing page by determining whether lastRoute exists in localStorage. The code example is as follows:

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

3. Use the hook function before the route jump

Before each route jump, we can use the beforeEach hook function before the jump. Save the current routing information so that the routing status can be restored after the page is refreshed. The code example is as follows:

router.beforeEach((to, from, next) => {
  localStorage.setItem('lastRoute', from.fullPath) // 保存当前路由信息
  next()
})

After the page is loaded, we can determine whether we need to jump to the previous routing page by determining whether lastRoute exists in localStorage. The code example is as follows:

mounted() {
  // 判断是否存在lastRoute，若存在则跳转到之前的路由页面
  const lastRoute = localStorage.getItem('lastRoute')
  if (lastRoute) {
    localStorage.removeItem('lastRoute')
    this.$router.replace(lastRoute)
  }
}

Summary:

Route loss is a common problem in uniapp development, but we can easily avoid this problem through the above three methods. When developing applications using uniapp, we should fully understand the routing mode of vue-router and take appropriate measures to solve the problem of route loss.

The above is the detailed content of Route lost after uniapp refresh. For more information, please follow other related articles on the PHP Chinese website!