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:'./'写的是相对路径,修改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改成相对路径,最后就修改为:
vue-cli3使用vue-router 使用动态路由,在刷新页面时报错的更多相关文章
- 使用VUE开发用户后台时的动态路由问题、按钮权限问题以及其他页面处理问题
如今前后端分离是大势所趋,笔者虽然是做后台的,但也不得不学学前端的流行框架VUE -_-||| . 为了学习VUE,笔者搭建了一个简单的用户后台,以此来了解VUE的开发思路(注:本项目不用于实际开发, ...
- Vue CLI3和Vue CLI2环境搭建
关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...
- vue:解决使用param传参后,再次刷新页面会新增一个原有的tab
问题:在最近的项目中,我通过传递不同的参数,复用同一组件进行渲染,然而意外出现一个bug,就是当我重新刷新该页面时,会新增一个tab 原来的: 刷新页面后: 查阅资料后,发现该现象是由于通过param ...
- vue-router+webpack线上部署时单页项目路由,刷新页面出现404问题
使用vue项目,线上部署的时候,访问首页以及通过路由打开二级页面没有问题,但是一刷新就出现404现象 因为刷新页面时访问的资源在服务端找不到,因为vue-router设置的路由不是真实存在的路径. 解 ...
- 46.VUE学习之--组件之使用动态组件灵活设置页面布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue打包后刷新页面报错:Unexpected token <
前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有 ...
- vue项目中上拉加载和下拉刷新页面的实现
功能:上拉加载,下拉刷新 使用方法: 自己创建一个.vue的文件(我自己是创建了一个PullToRefresh.vue的文件),将代码粘贴进去,具体的样式问题自己在该文件中调整. <templa ...
- vue 访问页面时报错 Failed to compile
这个是因为node-sass没安装好,所以要重新安装 windows下运行命令:npm install node-sass --registry=https://registry.npm.taobao ...
- 06 Vue路由简介,原理,实现及嵌套路由,动态路由
路由概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源. 那么url地址和真实的资源之间就有一种对应的关系,就是路由. 路 ...
随机推荐
- 繁繁的游戏 Floyd
繁繁的游戏 Floyd 繁繁想和小伙伴们打游戏,游戏在一个山庄进行,这个山庄有N座山,编号为\(1\)到\(N\),为了方便大 家在不同的山之间移动,繁繁建了一些桥,由于技术的原因,桥连接的两座山的高 ...
- 10分钟手把手教你运用Python实现简单的人脸识别
欲直接下载代码文件,关注我们的公众号哦!查看历史消息即可! 前言:让我的电脑认识我 我的电脑只有认识我,才配称之为我的电脑! 今天,我们用Python实现高大上的人脸识别技术! Python里,简单的 ...
- 使用Django实现发邮件功能
django实现发送邮件功能 django实现邮件发送功能 1)首先注册一个邮箱,这里以163邮箱为例 2)注册之后登录,进行如下修改 找到设置,设置一个授权码,授权码的目的仅仅是让你有权限发邮件 ...
- CF1204E Natasha, Sasha and the Prefix Sums(组合数学)
做法一 \(O(nm)\) 考虑\(f(i,j)\)为i个+1,j个-1的贡献 \(f(i-1,j)\)考虑往序列首添加一个\(1\),则贡献\(1\times\)为序列的个数:\(C(j+i-1,i ...
- ZR#1015
ZR#1015 解法: 我们需要求得, $ g_i $ 表示长度为的最长不下降子序列个数. 设 $ f_{i,j} $ 表示统计第前$ i $ 个数字,得到最长不下降子序列末端为 $ j $ . 显然 ...
- 中山纪中集训Day2又是测试(划水)
A组T1 bzoj 2674 Attack Description chnlich 非常喜欢玩三国志这款游戏,并喜欢用一些策略出奇制胜.现在,他要开始征服世界的旅途了.他的敌人有N 座城市和N 个太守 ...
- certification on windows and
https://jingyan.baidu.com/article/335530dae0eb2319ca41c378.html
- arcpy SearchCursor sql_clause
import arcpy fc = 'c:/data/base.gdb/well' fields = ['WELL_ID', 'WELL_TYPE'] # Use ORDER BY sql claus ...
- Zygote启动及其作用
目录 1.Zygote简介 2.Zygote进程如何启动 2.1 init.zygote64_32.rc文件 2.2 查看ps信息 2.3 启动 3.Zygote作用 3.1 启动system_ser ...
- JVM 线程上下文类加载器
当前类加载器(Current ClassLoader) 每个类都会使用自己的类加载器(即加载自身的类加载器)来去加载其他类(指所依赖的类) 如果ClassX引用了ClassY,那么ClassX的类加载 ...