解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题

原因:在路由中添加了相同的路由。
解决:
重写路由的push方法

在src/router/index.js 里面import Router from ‘vue-router‘下面写入下面方法即可

/**
 * 重写路由的push方法
 */
const routerPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return routerPush.call(this, location).catch(error=> error)
}

  

原文地址:https://www.cnblogs.com/lezuw/p/11718087.html

时间: 2024-10-06 23:23:24

解决vue项目路由出现message: "Navigating to current location (XXX) is not allowed"的问题的相关文章

解决vue项目eslint校验 Do not use 'new' for side effects 的两种方法

import Vue from 'vue' import App from './App.vue' import router from './router' new Vue({ el: '#app', render: h => h(App), router }) 当使用eslint校验运行上面这段代码时(该代码在src/main.js文件中),会报错 ?  http://eslint.org/docs/rules/no-new  Do not use 'new' for side effect

[记录]解决vue项目当直接通过url访问中间页时nginx返回404的问题

应用为VUE单页应用,路由模式为history,web服务器为nginx,正常情况下如果直接通过url访问一个中间页(不是index.html)时,会看到nginx返回的404错误,这个问题目前我只能通过修改nginx站点配置文件来实现. 具体代码(只看红色加粗的部分就行): server { listen 80; server_name ……; index index.php index.html index.htm default.php default.htm default.html;

解决vue项目中引入组件时出现的Module is not installed问题

如图,在vue项目中import自己定义的组件时,‘@api/table’出现下划线,ctrl+右键点击不会跳转到对应组件.鼠标移上去显示Module is not installed,多方查询后终于弄清楚了原因. 图中路径中有个@符号,这个符号是在build目录下的webpack.base.conf.js文件中定义的,代表当前项目的src目录. 之所以出现上述问题是因为在下图中的webpack中没有指定webpack 的配置文件,或者配置文件指定得不对.找到原因后解决方案就简单了,只需要将该配

vue-router路由懒加载(解决vue项目首次加载慢)

懒加载:----------------------------------------------------? 也叫延迟加载,即在需要的时候进行加载,随用随载. 为什么需要懒加载? 像vue这种单页面应用,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,时间过长,会出啊先长时间的白屏,即使做了loading也是不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时 简单的说

vue 项目路由跳转后显示不同的title

1.在router/index.js的每个路由中配置title 2.在项目中运行命令 npm install vue-wechat-title --save 安装插件(在 package.json文件的dependencies中可以看到已安装 "vue-wechat-title": "^2.0.5") 3.在main.js 中引入并使用 import VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTi

解决vue项目route使用history模式,tomcat部署刷新url 404问题

在webapps/项目名 创建WEB-INF ,创建web.xml文件 文件内容如下: <?xml version="1.0" encoding="UTF-8"?><web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation

解决vue修改路由的查询字符串(query)url不改变,页面不刷新问题

我个人猜测可能是对路由的数据检测深度不够吧,单纯修改query里面的属性是不能触发数据驱动的,因此要直接给query赋值新的对象才能驱动数据更新,做法如下 第一种 var query=JSON.parse(JSON.stringify(this.$route.query)) query.id="success" this.$router.push({path:'/url',query:query}) 第二种 var query={id:'123456'} this.$router.pu

解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

在config/index.js中的build命令的配置有一个属性叫assetsPublicPath,它的值为‘/’.意思是根目录,这时会从index.html所在的硬盘的根目录下开始查找,自然无法找到. 解决办法:改为‘./’这时就不再是绝对路径的根目录了,而是改为了相对路径,同目录下进行查找. build: { ... assetsPublicPath: './', 原文地址:https://www.cnblogs.com/223zzm/p/11259104.html

vue 项目中当访问路由不存在的时候默认访问404页面

前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在最后添加一个path: * ,优先级从上到下查找路由,都没有的时候全部指向 404页面 ,代码如下: const baseRoute = [ { path: '/login', name: 'login', component: Login }, {path: '/', redirect: '/in