浅谈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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
模拟jQuery ajax服务器端与客户端通信的代码
Mar 28 Javascript
JavaScript下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
xcode中获取js文件的路径方法(推荐)
Nov 05 Javascript
详谈Angular 2+ 的表单(一)之模板驱动型表单
Apr 25 Javascript
纯js代码生成可搜索选择下拉列表的实例
Jan 11 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
php array的学习笔记
2012/05/16 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
ThinkPHP中Widget扩展的两种写法及调用方法详解
2017/05/04 PHP
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
在Windows上安装Node.js模块的方法
2011/09/25 Javascript
ejs v9 javascript模板系统
2012/03/21 Javascript
Jquery Uploadify上传带进度条的简单实例
2014/02/12 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
2015/10/08 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
Input文本框随着输入内容多少自动延伸的实现
2017/02/15 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
详解js类型判断
2018/05/22 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
JS highcharts动态柱状图原理及实现
2020/10/16 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python关于变量名的基础知识点
2020/03/03 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
canvas实现烟花的示例代码
2020/01/16 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
中国电子产品批发商/跨境电商/外贸网:Sunsky-online
2020/04/20 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
高中军训感言1000字
2014/03/01 职场文书
初中班主任寄语
2014/04/04 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
深入理解redis中multi与pipeline
2021/06/02 Redis