刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo:

{
path: '/aa/:id',
name: 'aa',
component: aa
},

编程式路由:

this.$router.push({name:'aa',params:{id:1}});

页面跳转成功,参数也可以获取到,但是在刷新页面时,报错了

其他方式的路由都没有问题,找了半天不知道怎么回事儿,后来看了一下vue.config.js,publlicPath:'./'写的是相对路径,修改publicPath:'/',重新启动就可以了,

查看vue-cli的publicPath之后明白,publicPath默认是/,它会假设应用被部署到一个域名的根目录上,当被部署到一个子路径时,需要修改为:/子路径/;

可以修改为空字符串或者相对路径,这样就不用管项目部署的路径,所有的资源加载都是相对路径。

但是相对路径有限制,在下面的情况应该避免使用:

1 当时用h5 history.pushState的路由时,

2 当使用pages构建多页面应用时

参考:https://cli.vuejs.org/zh/config/#publicpath

vue-router的mode是history的情况下回发生上述问题,如果改成hash,使用默认值,publicPath可以使用相对路径,没有问题

,在histroy模式下,使用动态路由,publicpath不能是相对路径

因为打包之后,静态资源文件的路径问题,需要把publicPath改成相对路径,最后就修改为:

publicPath: process.env.NODE_ENV === "production" ? "./" : "/",

vue-cli3使用vue-router 使用动态路由,在刷新页面时报错的更多相关文章

  1. 使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题

    如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...

  2. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  3. vue:解决使用param传参后,再次刷新页面会新增一个原有的tab

    问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...

  4. vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题

    使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象 因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径. 解 ...

  5. 46.VUE学习之--组件之使用动态组件灵活设置页面布局

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

  6. vue打包后刷新页面报错:Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...

  7. vue项目中上拉加载和下拉刷新页面的实现

    功能:上拉加载,下拉刷新 使用方法: 自己创建一个.vue的文件(我自己是创建了一个PullToRefresh.vue的文件),将代码粘贴进去,具体的样式问题自己在该文件中调整. <templa ...

  8. vue 访问页面时报错 Failed to compile

    这个是因为node-sass没安装好,所以要重新安装 windows下运行命令:npm install node-sass --registry=https://registry.npm.taobao ...

  9. 06 Vue路由简介,原理,实现及嵌套路由,动态路由

    路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...

随机推荐

  1. Spring asm

    Spring 获取类的详细信息,以及方法时候,是通过asm 字节码进行获取的,在平时中我们也可以依赖spring 进行处理我们的类 //可以获取类的详细信息,比如父类上谁,类上面的注解 ,是否上接口 ...

  2. YAML_08 handlers触发器

    ansible]# vim adhttp.yml --- - hosts: cache   remote_user: root   tasks:     - copy:         src: /r ...

  3. 在Ubuntu 或 Debian 系统环境安装MYSQL数据库

    一.第一步下载myslq安装程序 sudo apt-get install mysql-server mysql-client apt-get程序会自动下载安装最新的mysql版本.在安装的最后,它会 ...

  4. 深入基础(四)Buffer,转码

    Buffer     前面提及到一些关于buffer类的问题,当时不是很明确 那么就次机会顺便深入探讨一下这个东西到底干嘛的出现在什么时候,如何使用.昨天跟朋友聊天他说我每一篇博文内容太长太长了 虽然 ...

  5. linux 日志写入到指定文件中

    php  /data/xxx/aaa.php > test.log 2>&1 >覆盖, >>追加 2>&1 表示不仅命令行正常的输出保存到test. ...

  6. 如何解决金蝶IKernel.exe报错 Windows Installer 错误 重新安装、无法卸载

    如何解决金蝶IKernel.exe报错 Windows Installer 错误 金蝶这个小婊子,就是这么贱. 卸载了高版本的,再安装低版本就不能安装上,死活都不能安装. 请手动启动一下Install ...

  7. (4)Go程序结构和流程控制

    Go程序主要由以下几部分组成:(具体可以参考2选择结构中的实例) *包声明 *导入包 *函数 *变量 *语句和表达式 *注释 流程控制 1.顺序结构 2.选择结构  (1)if else if 和 e ...

  8. YII框架的依赖注入容器

    依赖注入(Dependency Injection,DI)容器就是一个对象,它知道怎样初始化并配置对象及其依赖的所有对象. 所谓的依赖就是,一个对象,要使用另外一个对象才能完成某些功能.那么这个对象就 ...

  9. UOJ#318. 【NOI2017】蔬菜 贪心

    原文链接 www.cnblogs.com/zhouzhendong/p/UOJ318.html 前言 我怎么越来越菜了.先是题目读错,想了个李超树假算法,然后读懂题之后没了耐心直接贺题.然后发现我数据 ...

  10. Java 获取客户端真实IP地址

    本文基于方法 HttpServletRequest.getHeader 和 HttpServletRequest.getRemoteAddr 介绍如何在服务器端获取客户端真实IP地址. 业务背景 服务 ...