笔记大全

uniapp 刷新后路由丢失

更新时间：2023-10-31

前言

当在uniapp中刷新页面时，由于浏览器的表现形式，前端路由会丢失，这是一个非常常见的问题。在本文中，我们将会讨论这个问题，并提供一些解决方案。

问题分析

为了更好地理解这个问题，让我们先来分析一下uniapp中的路由是如何工作的。在uniapp中，我们通常使用vue-router来进行路由处理，其中最常见的处理方式是采用history模式。这意味着我们并没有使用#来处理我们的前端路由。而在使用这种方式的时候，当我们在刷新页面的时候，浏览器会认为我们要跳转到一个新的页面，而这个新的页面并没有被我们定义过。因此，我们的前端路由就会丢失了。

解决方案 #1

一个简单而有效的解决方案是使用hash模式。这种方式会在我们的URL中添加一个#标记，同时不会影响我们的路由处理。当我们进行刷新操作后，前端路由就不会被丢失了。

    // uniapp router初始化时使用hash模式
    const router=new VueRouter({
      mode: 'hash',
      routes
    })

解决方案 #2

另一个解决方案是使用本地存储（local storage）来保存我们的前端路由。在页面刷新时，我们可以从本地存储中检索出我们保存的路由，重新加载我们的应用程序。这种方法需要在刷新之前使用途中的路由信息进行存储，以便在刷新后重新加载。

    // 存储当前路由信息
    localStorage.setItem('lastRoute', JSON.stringify({
      name: this.$route.name,
      params: this.$route.params
    }));

    // 检索上次存储的路由信息
    const lastRoute=JSON.parse(localStorage.getItem('lastRoute'));
    if (lastRoute) {
      router.push({
        name: lastRoute.name,
        params: lastRoute.params
      });
    }

解决方案 #3

最后一个解决方案是使用服务端渲染（SSR）来处理我们的路由。这种方式会将路由信息保存在服务端，并在请求页面时通过服务端来生成我们的应用程序。这种方法需要一些额外的设置，但是可以提供更好的性能和良好的用户体验。

    // 服务端渲染设置
    const renderer=createRenderer({
      template,
      clientManifest
    })

    const app=createApp()
    app.use(router)

    server.get('*', (req, res)=> {
      const context={ url: req.url }
      renderer.renderToString(context, (err, html)=> {
        res.end(html)
      })
    })

总结

在本文中，我们讨论了uniapp中刷新后路由丢失的问题，并提出了三种解决方案。无论你选择哪种方案，重要的是要确保你的应用程序在刷新操作后可以正常工作。当然，在使用本地存储或SSR时，需要考虑到其中的安全性和性能问题。希望本文能够对你有所帮助。

c语言编程笔录