具体描述：vue项目，npm run build时点击路由切换，第一次点击没问题，再点不会切换报错如下图

原因分析：vue-router配置路由，当代码分割和懒加载时，由于webpack配置不当，导致懒加载chunk时相对路径出现混乱从而加载chunk失败。-----路径配置如下图

以上路由配置，举例systemManage说明报错点

编译之后，路径分别为

/system/auth

/system/role

/system/menu

/system/group

切换到任何其他目录均报错，无法查看到将要加载的路径

以上可能是 静态资源根路径未指定，相对路径相对于当前url目录导致

解决方法：修改webpack.config.js （自身项目由于将config配置提取出位置稍许有些不同）的静态资源根路径

以上修改后，路径切换正常

【vue】vue-router路径无法正确跳转的更多相关文章

  1. VSCode 在 Vue 导入路径中使用 @ 符号后无法正确跳转 bug

    VSCode 在 Vue 导入路径中使用 @ 符号后无法正确跳转 bug bug jsconfig.json { // This file is required for VSCode to unde ...

  2. vue打包静态资源路径不正确的解决办法

    vue打包静态资源路径不正确的解决办法 vue项目完成打包上线的时候会碰到静态资源找不到的问题,常见的有两个 1.js,css路径不对 解决办法:打开config/index.js,将其中的asset ...

  3. vue 路由视图，router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  4. vue 的router的简易运用

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 三、vue之router

    三.vue之router 此时vue的脚手架.创建项目已经完成. ... vue的运行流程 index.html-->main.js-->App.vue-->router/index ...

  6. 四 Vue学习 router学习

    index.js: 按需加载组件: const login = r => require.ensure([], () => r(require('@/page/login')), 'log ...

  7. vue打包后显示空白正确处理方法

    vue打包后显示空白正确处理方法是 1.找到配置文件(js与css加载不上) 修改 这样打包处理可以打开但是页面样式会找不到 2.修改(针对css中的图片加载不上) 找到对应的位置加上publicPa ...

  8. Vue中router两种传参方式

    Vue中router两种传参方式 1.Vue中router使用query传参 相关Html: <!DOCTYPE html> <html lang="en"> ...

  9. vue 中router.go；router.push和router.replace的区别

    vue 中router.go:router.push和router.replace的区别:https://blog.csdn.net/div_ma/article/details/79467165 t ...

随机推荐

  1. Spotlight on Mysql在Windows平台下的安装及使用简介

    Spotlight on Mysql在Windows平台下的安装及使用简介   by:授客 QQ:1033553122 1.   测试环境 Win7 64位 mysql-connector-odbc- ...

  2. loadrunner 脚本优化-参数化之场景中的参数化取值

    脚本优化-场景中的参数化取值 by:授客 QQ:1033553122   Action() { lr_eval_string("{NewParam}"); lr_eval_stri ...

  3. Flutter 布局（三）- FittedBox、AspectRatio、ConstrainedBox详解

    本文主要介绍Flutter布局中的FittedBox.AspectRatio.ConstrainedBox,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. FittedBox Scale ...

  4. (网页)java数组去重总结(转)

    转自CSDN: 1.背景 根据不同的业务逻辑,经常会遇到数组中存在多个重复元素的场合,总结了下数组的排序,留个记录. 2.实现方法   总结了四种方法,接下来进行展示 1.方法一 //数组去重方法一 ...

  5. Jenkins 配置CI/CD任务

    本文演示如何通过Jenkins创建CI/CD任务,部署一整套微服务体系结构,并运行在之前搭建的mini云平台上. 如果是初始尝试实践,可能需要参考 快速搭建云原生架构的实践环境 和 Jhipster技 ...

  6. NoSQL与MongoDB介绍

    写在前面 本文是由一次演讲整理出来的,文中大部分资料来源于网络,感谢Wikipedia,Google和MongoDB官网.文中使用的MongoDB版本为1.2.4. What is NoSQL NoS ...

  7. ASP.NET系统对象

    一.ASP.NET 系统对象        Request:用来获取客户端在Web请求期间发送的值,如URL参数,表单参数        Response:用来负者返回到客户端的HTTP输出      ...

  8. c/c++ 友元基本概念

    友元基本概念: 1,把一个一般函数声明为一个类的友元函数 2,把一个类A的某几个成员函数声明为某个类B的友元函数 3,把一个类A声明为一个类B的友元类. 友元的作用:可以访问类B里所有的成员变量和成员 ...

  9. Python3 socket网络编程（一）

    Socket的定义 套接字是为特定网络协议(例如TCP/IP,ICMP/IP,UDP/IP等)套件对上的网络应用程序提供者提供当前可移植标准的对象.它们允许程序接受并进行连接,如发送和接受数据.为了建 ...

  10. Kali 2.0 Web后门工具----WebaCoo、weevely、PHP Meterpreter

    注:以下内容仅供学习使用,其他行为均与作者无关!转载请注明出处,谢谢! 本文将介绍 Kali 2.0 版本下的三款Web后门工具:WebaCoo.weevely.PHP Meterpreter,这类工 ...