浅谈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 判断 object 的特定类转载
Feb 01 Javascript
Jquery作者John Resig自己封装的javascript 常用函数
Nov 09 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
使用jquery解析XML示例代码
Sep 05 Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
Nuxt配合Node在实际生产中的应用详解
Aug 07 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
Feb 28 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP5.0正式发布 不完全兼容PHP4 新增多项功能
2006/10/09 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
php curl 获取https请求的2种方法
2015/04/27 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
浅谈php中fopen不能创建中文文件名文件的问题
2017/02/06 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery使用之标记元素属性用法实例
2015/01/19 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
微信小程序倒计时功能实例代码
2018/07/17 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
vue学习笔记之slot插槽用法实例分析
2020/02/29 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python下载图片实现方法(超简单)
2017/07/21 Python
Python实现字典去除重复的方法示例
2017/07/31 Python
Python中字符串与编码示例代码
2019/05/20 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
优秀学生获奖感言
2014/02/15 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
综合办公室主任岗位职责
2014/04/13 职场文书
产品设计开发计划书
2014/05/07 职场文书
小学英语教师先进事迹
2014/05/28 职场文书
啤酒节策划方案
2014/05/28 职场文书
民族精神月活动总结
2014/08/28 职场文书
优秀高中学生评语
2014/12/30 职场文书
秋季运动会开幕词
2015/01/28 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android