浅谈vue项目,访问路径#号的问题


Posted in Javascript onAugust 14, 2020

刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个”/#/“不知道是什么东西,于是百度查了一下。

原因:对于vue开发的单页面应用,我们在切换不同的页面的时候,可以发现html永远只有一个,这也正是称之为单页面的原因。而vue-router默认hash模式--------使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。因为对于正常的页面来说,更换url一定是会导致页面更换的,而只有更换url中的查询字符串和hash值的时候才不会重新加载页面。

如果不想要#,可以使用路由的history模式,这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面,使用这种模式之后,就没有#了,而是可以像使用正常的url进行访问了。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

补充知识:vue运行同时被localhost和ip地址访问

在index.js文件下修改host内容,localhost改为本机ip

host: '192.168.X.XX',// can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

在package.json文件中dev内容后面加?host0.0.0.0

浅谈vue项目,访问路径#号的问题

以上这篇浅谈vue项目,访问路径#号的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 静态页面实现随机显示广告的办法
Nov 17 Javascript
jquery键盘事件介绍
Jan 31 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Prototype框架详解
Nov 25 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
May 24 Javascript
VueAwesomeSwiper在VUE中的使用以及遇到的一些问题
Jan 11 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
使用JavaScript破解web
Sep 28 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 #Javascript
vue调用本地摄像头实现拍照功能
Aug 14 #Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 #Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 #Javascript
Vue的Options用法说明
Aug 14 #Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 #Javascript
vue 扩展现有组件的操作
Aug 14 #Javascript
You might like
js下函数般调用正则的方法附代码
2008/06/22 PHP
十幅图告诉你什么是PHP引用
2015/02/22 PHP
PHP中返回引用类型的方法
2015/04/03 PHP
Laravel中使用FormRequest进行表单验证方法及问题汇总
2016/06/19 PHP
js数组的操作指南
2014/12/28 Javascript
JS点击链接后慢慢展开隐藏着图片的方法
2015/02/17 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
JavaScript学习笔记之创建对象
2016/03/25 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[14:51]DOTA2 HEROS教学视频教你分分钟做大人-卓尔游侠
2014/06/13 DOTA
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
python中执行shell的两种方法总结
2017/01/10 Python
python使用两种发邮件的方式smtp和outlook示例
2017/06/02 Python
用Pygal绘制直方图代码示例
2017/12/07 Python
python实现监控某个服务 服务崩溃即发送邮件报告
2018/06/21 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
python打印异常信息的两种实现方式
2019/12/24 Python
tensorflow模型继续训练 fineturn实例
2020/01/21 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
什么是makefile? 如何编写makefile?
2013/01/02 面试题
《晏子使楚》教学反思
2014/02/08 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
大学毕业生个人总结
2015/02/28 职场文书
研究生简历自我评
2015/03/11 职场文书
实习班主任自我评价
2015/03/11 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript
pytest实现多进程与多线程运行超好用的插件
2022/07/15 Python