vue-router 刷新后页面报错

2024-10-07

vue-cli3使用vue-router 使用动态路由，在刷新页面时报错

刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo: { path: '/aa/:id', name: 'aa', component: aa }, 编程式路由: this.$router.push({name:'aa',params:{id:1}}); 页面跳转成功,参数也可以获取到,但是在刷新页面时,报错了其他方式的路由都没有问题,找了半天不知道怎么回事儿,后来看了一下vue.config.js,publlicPath:'./'写的是相对路径,修改public

vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据sessionstorage的特性,做一下各个方法的封装: const ls = window.sessionStorage; export default { getItem(key) { try { return JSON.parse(ls.getItem(key)); } catch (err) { ret

Vue Router 常见问题（push报错、push重复路由刷新）

Vue Router 常见问题用于记录工作遇到的Vue Router bug及常用方案 router.push报错,Avoided redundant navigation to current location: "/xxx" 大意为路由频繁点击导致路由重复,该报错对路由跳转功能没有任何影响解决方案:重写push方法将异常捕获就不会报错了 let routerPush = VueRouter.prototype.push; VueRouter.prototype.push =

vue项目打包后运行报错400如何解决

昨天一个Vue项目打包后,今天测试,发现无论localhost还是服务器上都运行不了,报错如下: Failed to load resource: the server responded with a status of 400 (Bad Request) 网上搜索一圈,牛头不对马嘴的居多,向一前辈请教后,问题迎刃而解,现将方法分享如下: 其实超级简单!超级简单!超级简单!重要是事情说三遍,只需----------> 找到node_modules/@vue/cli-service/lib/op

quasar框架在store中使用router跳转页面报错

网上一通百度,终于在这篇博客中找到原因. https://www.cnblogs.com/remly/p/12995936.html 原因是: 在router中导出了一个工厂函数, 既然是一个函数,那么我new 一个对象不就行了吗,结果我new了一个对象,没有报错,但是出现地址改变,页面没有跳转过去. 百度没有找到解决的办法,只好改成导出一人对象,测试跳转成功. 来自为知笔记(Wiz)

vue使用uglifyjs-webpack-plugin后打包报错

楼主最新对已做项目进行打包优化,配置了打包环境下去除console.log语句插件---使用uglifyjs-webpack-plugin具体代码如下 npm install uglifyjs-webpack-plugin -D const UglifyJsPlugin = require('uglifyjs-webpack-plugin') configureWebpack: config => { if (isProduction) { config.plugins = config.plu

vue跳转本页面报错

一个按钮绑定一个方法,方法是跳转到某个路由地址,当已经点击触发方法到该路由下的时候,再进行点击该按钮控制台就会报错,不会影响项目运行解决方法: if(this.$route.path == '/bindingmodifica/newpassword'){ return '' }else{ this.$router.push('/bindingmodifica/newpassword') } 判断该路由是否为改地址,不是的时候再进行跳转

React报错：Laravel React-Router browserHistory 刷新子页面报错404

举例:myblog.com/ 刷新没问题 myblog.com/add 刷新404 browserHistory报404,hashHistory却正常原因是少路由.web.php添加路由 Route::get('/add', function () { return view('welcome'); });

vue 使用webpack打包后路径报错以及 alias 的使用

一.vue 使用webpack打包后路径报错(两步解决) 1. config文件夹 ==> index.js ==> 把assetsPublicPath的 '/ '改为 './' 2. build文件夹 ==> utils.js ==> 添加代码 publicPath: '../../' 二.alias的使用(两种方式) 当项目逐渐变大之后,文件与文件直接的引用关系会很复杂,这时候就需要使用alias 了,在脚手架搭的vue项目中,在webpack.base.conf.js里面可以

解决在Vue项目中时常因为代码缩进导致页面报错的问题

前言如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因分析通过查看package.json文件我们可以发现,在文件中默认安装了eslint-loader模块,eslint-loader模块是目前相对比较流行的代码检测工具,可以检测书写的代码是否符合统一规范,可以在一些比较大型的项目开发中统一开发人员的代码风格,这也就是为什么代码缩进有可能导致页面报错

vue中更换.ico图标报错路径找不到图片

问题描述: vue项目中,想要更换.ico图片,更换完成后刷新页面报错,找不到路径. 解决: 更换完图片,重新启动下vue项目(npm run dev)就可以啦~ 哈哈哈补充知识: 网页title旁边的小图片设置,图片要求格式必须是.ico,附加ico图片转换地址:http://www.bitbug.net 在html文件中的<head></head>标签中加上: <link rel="icon" href="picture.ico"

vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives

vue使用v-for时vscode报错 Elements in iteration expect to have 'v-bind:key' directives Vue 2.2.0+的版本里,当在组件中使用v-for时,key是必须的错误提示:[vue-language-server] Elements in iteration expect to have 'v-bind:key' directives.Renders the element or template block multipl

Jenkins安装时Web页面报错提示离线安装

先跳过所有. 方法1 先看它的提示:”参考离线Jenkins安装文档“发现链接点不开,我还以为是被墙了呢,FQ以后还是打不开.看来这个参考文档是没有用滴.点击配置HTTP代理跳出如下界面:安装Jenkins时Web页面报错:该Jenkins实例似乎已离线_02.png没有一句提示我也不知道怎么配置,放弃.最终解决方法网上好多文章吧唧吧唧说了好长,其实就三步:第一步:打开配置页面 http://localhost:8080/pluginManager/advanced进去以后是这样的第二步:H

Eclipse中导入项目后js报错解决方法(转未解决问题)

本文转自:http://blog.csdn.net/chenchunlin526/article/details/54666882 Eclipse中导入项目后js报错的原因与解决方法在我们将项目导入Eclipse后,配置好各种编译条件.加载好jar包.配置好tomcat后发现项目还是报错,(前提是项目本身并没有错误,而是我们在初次导入到Eclipse中的时候报错),那是什么原因引起的呢? 报错如下情况: 原因是Eclipse的js校验功能引起的! 一.简单解决方法是:js文件右键Valid

Vue. 之刷新当前页面，重载页面数据

Vue. 之刷新当前页面,重载页面数据如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 script代码块添加:watch模块,如下代码: ... ... mounted : function() { this.loadData(); }, watch: { //监听相同路由下参数变化的时候,从而实现异步刷新 '$route'(to,from) { this.loadData(); }, },

分析https网页加载http资源导致的页面报错原因及其解决方案

https网页加载http资源导致的页面报错及解决方案 https是当下的网站的主流趋势,甚至像苹果这样的大公司,则完全要求用户必须使用https地址. 然而对于以前http链接来说,我们往往就存在一个兼容性问题,因为你不可能一下就全部切换过去,应该在很长一段时间内,https与http将共存. https与http共存的场景有如: 1. app已经发布出去,其调用接口的地址为http的,那么这是必须兼容的. 2. app中嵌入了h5页面,而这页面在以前的设计中是使用http访问的,如果换成ht

如何解决spring boot 项目导入依赖后代码报错问题

如何解决spring boot 项目导入依赖后代码报错问题 2020-08-15 14:17:18 代码截图如图所示(由于本人问题已经解决,没来得及截图,所以在网上找了一张图片)

dialogic d300语音卡驱动重装后启动报错问题解决方法

dialogic d300 驱动重装后 dlstart 报错解决问题描述:dlstart 后如下报错 [root@BJAPQ091 data]#dlstop Stopping Dialogic Services... Stopping Clocking Daemon:[ 纭畾 ] Stopping ClockingServer:[ 纭畾 ] Stopping Telephony System Monitor:[ 纭畾 ] Stopping Dialogic(R) boar

Heka 编译安装后运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer

Heka 编译安装后运行报错 panic: runtime error: cgo argument has Go pointer to Go pointer 解决办法: 1. Start hekad with the GODEBUG variable exported in its environment: export GODEBUG=cgocheck=0 2. 之后出现如下报错,找不到lua文件 2017/01/16 10:33:38 Decoder 'MemStats-MemStats

安装mongodb后启动报错libstdc++

安装mongo后启动报错如下图显然说是libstdc++.so文件版本的问题,这种一般都是gcc版本太低了接着查询gcc的版本 strings /usr/lib/libstdc++.so.6 | grep GLIBCXX 接着去找下libstdc++.so新点的版本,一定要根据自己的系统版本去找啊,由于我找错了版本报错系统位数不对随后下载了一个64位的libstdc++.so.6.0.17的文件,然后软链成libstdc++.so.6 ln -s libstdc++.so.6.0.1

Maven项目下update maven后Eclipse报错：java.lang.ClassNotFoundException: ContextLoaderL

Maven项目下update maven后Eclipse报错:java.lang.ClassNotFoundException: ContextLoaderL 严重: Error configuring application listener of class org.springframework.web.context.ContextLoaderListener java.lang.ClassNotFoundException: org.springframework.web.co

vue-router 刷新后页面报错

热门专题