栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 系统运维 > 运维 > Linux

vue使用history模式及相关问题处路由

Linux 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue使用history模式及相关问题处路由

vue使用history模式及相关问题处路由 路由使用history模式

vue 默认使用的是hash模式,在这种模式下,所有的路由地址都会在端口号后加入一个#号。
使用这种模式:
一是url中带有#不是很美观
二是在某些特殊场景下无法达到需求
这时可以开启vue的history模式,可以消除这个#号

根据官方文档,秩序要在新建router时如下配置即可开启history模式

const router = new Router({mode: 'history', routes: routes});

在本地开发时,没有什么影响,但部署服务时,需要修改服务器配置。不然就会出404或者静态资源加载不出来的问题。我使用的是nginx代理,官方提供了以下的配置方案
在nginx.config中添加以下代码:

location / { try_files $uri $uri/ /index.html; }

修改之后,就不会出现404问题,但如果使用了二级路由,访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路由页面就出异常了

Uncaught SyntaxError: Unexpected token '<'

看下我们引入这些异常文件,是在index.html文件中直接引用的,也就是在根路径下引入的。之前的hash模式下,根路径是不会变的,所以我们在index.html文件中直接引入这些静态文件,是可行的,但是使用history模式后,根路径就不固定了。那么这种引入方式就不可行了,所以才造成了上边出现的页面无法渲染的问题:

这里我们将打包的配置由相对路径改为绝对路径,修改config下的index.js

将assetsPublicPath: './'修改为assetsPublicPath: '/'

build: {  
// Template for index.html  index: path.resolve(__dirname, '../dist/index.html'),  
// Paths  
assetsRoot: path.resolve(__dirname, '../dist'), 
assetsSubDirectory: 'static',  
assetsPublicPath: '/',

路由能够正常跳转,并且刷新也不再报错
参考连接:
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/361200.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号