Vue 在页面中手动刷新后路由前会加上/

最新推荐文章于 2023-07-19 16:48:11 发布
最新推荐文章于 2023-07-19 16:48:11 发布
阅读量1.4k 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/X_Flandre/article/details/118965099
版权

可以看到,setItem方法中每次存储数据都会转换成JSON格式的字符串

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

此时方法中接收到参数的值为’/home’,但经过转换后成为了"’/home’",相当于字符串外又套了一层字符串,所以会导致刷新后出现下面的问题
在这里插入图片描述

解决办法:只需要在文件中找到哪些地方使用了activePath,将其JSON.parse转换为可用数据类型即可

X_Flandre
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue预渲染之prerender-spa-plugin解析(一)
vv_bug
11-28 1万+
前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染. 什么是预渲染? 为什么需要用预加载呢? 以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的: 然后我们运行下页面后: ...
浏览器的地址栏，多输入了一个 “/”
进三步的博客
07-03 595
浏览器的地址栏，多输入了一个 “/”,可以 请求到页面，导致页面不能正常加载，但是前端导入的js不能导入，
vue页面访问路径Url带/#/去除方法
lym905612018的博客
02-07 3121
在router->index.js中mode类型默认为hash，修改为history const router = new vueRouter({ mode: 'history', routes: [...] }) nginx首页配置中添加如下代码： location / { try_files $uri $uri/ /index.html; } 参考文献：http://150.158.83.118/blog?blog_id=44 ...
刷新vue项目后，在非routerview中的组件获取路由路径永远是“/“的解决方案
tjq11111的博客
07-19 714
刷新项目后，在非routerview中的组件获取路由路径永远是"/"
vue中解决动态路由加载，刷新页面出现路由重复添加/出现空白页的问题
hahaha_1314的博客
03-25 8809
vue动态路由刷新页面后出现问题的处理
vue在App.vue文件中监听路由变化刷新页面操作
10-14
主要介绍了vue在App.vue文件中监听路由变化刷新页面操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue通过路由实现页面刷新的方法
08-28
在本文中，我们将探讨通过路由实现页面刷新的方法，解决购物车页面跳转到详情页后返回时的刷新问题。 知识点一：使用 beforeRouteLeave 实现销毁 bus 事件 在 Vue 项目中，使用 bus 事件来实现组件之间的通信是一...
vue实现路由不变的情况下，刷新页面操作示例
10-15
主要介绍了vue实现路由不变的情况下，刷新页面操作,结合实例形式分析了vue路由不变的情况下刷新页面具体原理、操作方法与相关注意事项,需要的朋友可以参考下
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
在 Vue 项目中，我们经常需要使用 addRoutes 动态添加路由，但是在刷新页面后，这些动态添加的路由就会失效。下面我们来介绍如何解决这个问题。 应用场景 在某些场景下，我们需要利用 addRoutes 动态添加路由，...
解决vue 路由变化页面数据不刷新的问题
08-27
在Vue.js应用中，路由是页面之间导航的关键组成部分。然而，有时可能会遇到一个问题：当路由发生变化时，页面数据并未自动刷新。这种情况可能会影响用户体验，尤其是当你期望新路由加载时更新相应的数据。本篇文章将...
若依（前后端分离），页面刷新一次URL出现“//”，页面刷新两次直接404
qq_43799179的博客
05-26 2698
若依管理系统，vue3.0前后端分离，前端页面刷新一次URL出现“//”页面刷新两次404
vue 项目预渲染（prerender-spa-plugin）
吾日三省吾身：高否？富否？帅否？ 否！否！否！ 安心上班吧……
06-03 9947
服务器端渲染 vs 预渲染 (SSR vs Prerendering) 如果你调研服务器端渲染 (SSR) 只是用来改善少数营销页面（例如/,/about,/contact等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以...
vue项目页面地址自动添加#号的问题
热门推荐
qq_27474555的博客
07-31 1万+
vue项目页面地址自动添加#号的问题 1、原因 vue路由默认是hash，改成history模式 2、方法 配置路由模式，例如： export default new Router({ mode: 'history', routes: [{ path: '/', name: 'Hello', component: Hello }] }) }) 3、后续问题处...
刷新页面后导航栏路由与页面不一致情况解决方法
qq_42207453的博客
12-30 911
刷新页面时发现页面是图书显示页面，但导航栏却高亮显示的是“首页”,经以下修改后正常了。 这样就能获取到当前路由，然后高亮显示该路由。
将前端vue项目部署到nginx中，vue中publicPath自动拼接一个路径
cjy1575944940的博客
08-22 4154
将原本部署在tomcat中的vue项目改成部署在nginx中。强调了vue.config.js里的publicPath对nginx配置的影响，修改访问路径后vue配置以及nginx配置都需要修改
关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
qq_37319220的博客
03-29 4376
  如下图所示： 在实例化路由模块时，添加mode属性  为‘history’，这样地址栏的“#”号就会消失。        缺点：这种模式下，跳转页面是不会出现问题的，但是当刷新页面是就会出现404，这时候就需要server端的配合，当页面为404时默认指向index.html，这点可以查看官网文档说明...
vue项目刷新当前页面的三种方法
无人之岛08的博客
12-09 2962
想必大家在刨坑vue的时候也遇到过下面情形：比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种： 如果希望点击确定的时候，Dialog 对话框关闭的时候，当前http://localhost:9530/#/supplier/supplierAll页面可以重新刷新下 那么表格的数据可以重新加载，Dialog 对话框设置的数据可以在确定后刷新出现在页面上 这时候我们最直接的思维就是想到下面这种： 但是，试过的会发现用vue-router重新路由到当前页面，页面是不进行刷新的，
vue在app.vue文件中监听路由变化刷新页面操作
最新发布
09-02
在Vue的app.vue文件中监听路由变化并刷新页面的操作，可以通过使用Vue Router提供的路由钩子函数来实现。 首先，在app.vue文件中引入Vue Router，并创建一个Vue Router实例，将其注入到根Vue实例中。 在Vue Router实例中，可以使用beforeEach钩子函数来监听路由变化。beforeEach钩子函数会在每次路由切换之前被调用。 在beforeEach钩子函数中，可以执行页面刷新的操作。例如，可以使用location.reload()方法来重新加载当前页面。 以下是一个示例的代码： ```javascript // app.vue文件中引入Vue Router import VueRouter from 'vue-router' // 创建Vue Router实例 const router = new VueRouter({ // 路由配置 }) // 将Vue Router实例注入到根Vue实例中 new Vue({ router, render: h => h(App) }).$mount('#app') // 在Vue Router实例中使用beforeEach钩子函数来监听路由变化 router.beforeEach((to, from, next) => { // 执行页面刷新的操作 location.reload() next() }) ``` 通过以上的代码，就可以在app.vue文件中监听路由变化并刷新页面。当路由发生变化时，页面将会重新加载。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值