浅谈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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
为原生js Array增加each方法
Apr 07 Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
ECMAScript6函数默认参数
Jun 12 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
微信小程序后端实现授权登录
Feb 24 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模拟ping命令(php exec函数的使用方法)
2013/10/25 PHP
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
js同比例缩放图片的小例子
2013/10/30 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
2016/01/25 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
基于javascript 显式转换与隐式转换(详解)
2017/12/15 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
解决vue-photo-preview 异步图片放大失效的问题
2020/07/29 Javascript
Python数据结构之单链表详解
2017/09/12 Python
Python实现变量数值交换及判断数组是否含有某个元素的方法
2017/09/18 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
django+echart数据动态显示的例子
2019/08/12 Python
Laravel框架表单验证格式化输出的方法
2019/09/25 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
英国在线花园中心:You Garden
2018/06/03 全球购物
网络、C以及其他硬件方面的面试题
2016/08/23 面试题
公关关系专员的自我评价分享
2013/11/20 职场文书
门卫班长岗位职责
2013/12/15 职场文书
工作中个人的自我评价
2013/12/31 职场文书
自考生自我评价分享
2014/01/18 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
党的群众路线教育实践活动个人剖析材料
2014/10/07 职场文书
幼师辞职信范文
2015/02/27 职场文书
单位领导婚礼致辞
2015/07/28 职场文书
MySQL EXPLAIN输出列的详细解释
2021/05/12 MySQL
关于Python使用turtle库画任意图的问题
2022/04/01 Python