浅谈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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
Javascript 学习笔记 错误处理
Jul 30 Javascript
JavaScript动态修改网页元素内容的方法
Mar 21 Javascript
js判断checkbox是否选中个数的方法(超简单)
Aug 19 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
原生JS实现自定义下拉单选选择框功能
Oct 12 Javascript
JS实现li标签的删除
Apr 12 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
小程序实现文字循环滚动动画
Jun 14 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下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP数组对比函数,存在交集则返回真,否则返回假
2011/02/03 PHP
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
ThinkPHP框架实现FTP图片上传功能示例
2019/04/08 PHP
jQuery 版本的文本输入框检查器Input Check
2009/07/09 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
2016/05/21 Javascript
使用BootStrap实现用户登录界面UI
2016/08/10 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
React组件refs的使用详解
2018/02/09 Javascript
详解基于Vue-cli搭建的项目如何和后台交互
2018/06/29 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
JS前后端实现身份证号验证代码解析
2020/07/23 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
python print输出延时,让其立刻输出的方法
2019/01/07 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Python同时处理多个异常的方法
2020/07/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
城野医生官方海外旗舰店:风靡亚洲毛孔收敛水
2018/04/26 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
工厂厂长岗位职责
2013/11/08 职场文书
个人工作能力自我评价
2015/03/05 职场文书
观看建国大业观后感
2015/06/01 职场文书
社区结对共建协议书
2016/03/23 职场文书