浅谈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效果之图片减速度滚动实现代码
Dec 08 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
jquery live()重复绑定的解决方法介绍
Jan 03 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
js简单实现竖向tab选项卡的方法
May 04 Javascript
js倒计时简单实现代码
Aug 11 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue2.0获取鼠标位置的方法
Sep 13 Javascript
javascript 原型与原型链的理解及应用实例分析
Feb 10 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
vue实现简易计算器功能
Jan 20 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
怎么清空javascript数组
2013/05/11 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
我的Node.js学习之路(一)
2014/07/06 Javascript
使用js实现数据格式化
2014/12/03 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
vue系列之动态路由详解【原创】
2017/09/10 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
Python实现二分查找算法实例
2015/05/26 Python
python 链接和操作 memcache方法
2017/03/04 Python
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python 除法保留两位小数点的方法
2018/07/16 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
基于Python正确读取资源文件
2020/09/14 Python
纽约家具、家居装饰和地毯店:ABC Carpet & Home
2017/06/21 全球购物
英国排名第一的冲浪店:Ann’s Cottage
2020/06/21 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
保送生自荐信范文
2013/10/06 职场文书
中医药大学毕业生自荐信
2013/11/08 职场文书
商铺门前三包责任书
2014/07/25 职场文书
在职员工证明书
2014/09/19 职场文书
关于社会实践的心得体会(2016最新版)
2016/01/25 职场文书
php微信小程序解包过程实例详解
2021/03/31 PHP