浅谈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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
May 25 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
解析浏览器端的AJAX缓存机制
Jun 21 Javascript
深入理解Vue transition源码分析
Jul 30 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
JS实现字符串翻转的方法分析
Aug 31 Javascript
JSON.stringify()方法讲解
Jan 31 Javascript
vue实现跳转接口push 转场动画示例
Nov 01 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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
关于svn冲突的解决方法
2013/06/21 PHP
php将字符串转化成date存入数据库的两种方式
2014/04/28 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
理清apply(),call()的区别和关系
2011/08/14 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
javascript代码运行不出来执行错误的可能情况整理
2013/10/18 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jQuery on()方法使用技巧详解
2015/04/16 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
JS实现方向键切换输入框焦点的方法
2015/08/19 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
2016/08/25 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
利用python画出AUC曲线的实例
2020/02/28 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
妇联主席先进事迹
2014/05/18 职场文书
商场开业庆典策划方案
2014/06/02 职场文书
2014年医院工作总结
2014/11/20 职场文书
颐和园导游词
2015/01/30 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python