浅谈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设置控件位置的方法
Aug 21 Javascript
jquery组件使用中遇到的问题整理及解决
Feb 21 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
jquery-mobile表单的创建方法详解
Nov 23 Javascript
浅谈jQuery before和insertBefore的区别
Dec 04 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
jQuery实现鼠标滑动切换图片
May 27 jQuery
element跨分页操作选择详解
Jun 29 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
uniapp实现可滑动选项卡
Oct 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
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
基于curl数据采集之单页面并行采集函数get_htmls的使用
2013/04/28 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
PHP反射实际应用示例
2019/04/03 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
js基础之DOM中元素对象的属性方法详解
2016/10/28 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
JavaScript实现封闭区域布尔运算的示例代码
2018/06/25 Javascript
angular实现input输入监听的示例
2018/08/31 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
es6函数之严格模式用法实例分析
2020/03/17 Javascript
js实现头像上传并且可预览提交
2020/12/25 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
python创建列表并给列表赋初始值的方法
2015/07/28 Python
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python3实现爬虫爬取赶集网列表功能【基于request和BeautifulSoup模块】
2018/12/05 Python
python实现简单图片物体标注工具
2019/03/18 Python
利用pyuic5将ui文件转换为py文件的方法
2019/06/19 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
Python3读写ini配置文件的示例
2020/11/06 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
省级四好少年事迹材料
2014/01/25 职场文书
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS