浅谈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 相关文章推荐
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
Firefox和IE兼容性问题及解决方法总结
Oct 08 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
Dec 18 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 Javascript
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
解决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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
PHP 获取MSN好友列表的代码(2009-05-14测试通过)
2009/09/09 PHP
PHP去掉从word直接粘贴过来的没有用格式的函数
2012/10/29 PHP
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
php和asp语法上的区别总结
2019/05/12 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
详解Angular2 关于*ngFor 嵌套循环
2017/05/22 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
2020/04/22 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
python实现文件的备份流程详解
2019/06/18 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
项目合作计划书
2014/01/09 职场文书
低碳环保演讲稿
2014/08/28 职场文书
高三语文复习计划
2015/01/19 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android