浅谈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 实现模态对话框 源代码大全
May 02 Javascript
chrome原生方法之数组
Nov 30 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
Apr 23 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
jQuery的attr与prop使用介绍
Oct 10 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
javascript对象的相关操作小结
May 16 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
通过说明与示例了解js五种设计模式
Jun 17 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
adodb与adodb_lite之比较
2006/12/31 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
jQuery使用技巧简单汇总
2013/04/18 Javascript
js使用eval解析json(js中使用json)
2014/01/17 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
jQuery对指定元素中指定字符串进行替换的方法
2015/03/17 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
js仿微博实现统计字符和本地存储功能
2015/12/22 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
2016/07/07 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
vue-cli监听组件加载完成的方法
2018/09/07 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
2020/09/10 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python3 下载网络图片代码实例
2019/08/27 Python
python3.x中安装web.py步骤方法
2020/06/23 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
小学教师的个人自我鉴定
2013/10/24 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
2014国庆65周年领导讲话稿(3篇)
2014/09/21 职场文书
2015年世界水日活动总结
2015/02/09 职场文书
小升初自荐信怎么写
2015/03/26 职场文书
如何写观后感
2015/06/19 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Java 超详细讲解hashCode方法
2022/04/07 Java/Android