具体描述：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. 如何获取view的大小

    很多初学者都会犯一个错误 ,就是在onCreate或者onStart里面去获取view的大小,然而这样获取到的宽高通常都是0,为什么呢?因为view的测量过程和activity的生命周期不是同步的,因 ...

  2. 关于在ROS kinetic下arbotix报错的问题

    最近在学习ros过程中 出现了一个包错误  ERROR:cannot launch node of type [arbotix_python/arbotix_driver]:arbotix_pytho ...

  3. 根据class判断

    一.生命不息,代码不止

  4. spring4笔记----spring生命周期属性

    init-method : 指定bean的初始化方法-spring容器会在bean的依赖关系注入完成后调用该方法 destroy-method :指定bean销毁之前的方法-spring容器将会在销毁 ...

  5. shell编程-输出（六）

    echo输出echo指令用于字符串的输出 格式:echo 字符串 直接输出字符串:string echo 'this is string-output' 用双引号,这儿也可以省略引号 转义字符:\ e ...

  6. 函数指针的返回值是指针数组，数组里放的是int；函数指针的返回值是指针数组，数组里放的是int指针

    函数指针的返回值是指针数组,数组里放的是int 函数指针的返回值是指针数组,数组里放的是int指针 #include <stdio.h> #include <stdlib.h> ...

  7. 一次线上问题引发的对于C#中相等判断的思考

    线上报来一个问题,说用户的数据丢失了.开发经过紧张的调查.终于找到了原因. if (newData.GetValue(rowIndex) == oldData.GetValue(rowIndex)) ...

  8. android调试工具adb命令大全

    转载: 一.adb介绍SDK的Tools文件夹下包含着Android模拟器操作的重要命令adb,adb的全称为(Android Debug Bridge就是调试桥的作用.通过adb我们可以在Eclip ...

  9. 归并排序python实现

    归并排序python实现 归并排序 归并排序在于把序列拆分再合并起来,使用分治法来实现,这就意味这要构造递归算法 首先是一个例子 原序先通过一半一半的拆分,然后: 然后再一步一步的向上合并,在合并的过 ...

  10. IntelliJ IDEA 导入Spring源码

    第一步: 使用git 拉取代码 git 命令: git init    //创建git仓库 git clone  https://github.com/spring-projects/spring-f ...