浅谈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 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
Jun 09 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
Nov 13 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 01 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
PHP令牌 Token改进版
2008/07/18 PHP
PHP会话控制:Session与Cookie详解
2014/09/27 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
Laravel实现短信注册的示例代码
2018/05/29 PHP
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
JavaScript 格式字符串的应用
2010/03/29 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
jquery实现控制表格行高亮实例
2013/06/05 Javascript
jQuery对html元素取值与赋值的方法
2013/11/20 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
使用pdb模块调试Python程序实例
2015/06/02 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
python修改FTP服务器上的文件名
2019/09/11 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
Fenty Beauty官网:蕾哈娜创立的美妆品牌
2021/01/07 全球购物
error和exception有什么区别
2012/10/02 面试题
有创意的广告词
2014/03/18 职场文书
家长会主持词
2014/03/26 职场文书
中国梦我的梦演讲稿
2014/04/23 职场文书
建筑安全标语
2014/06/07 职场文书
承租经营合作者协议书
2014/10/01 职场文书
python实现会员管理系统
2022/03/18 Python
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js