浅谈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 asp.net 用json格式返回自定义对象
Apr 07 Javascript
JS删除数组元素的函数介绍
Mar 27 Javascript
javascript 小数取整简单实现方式
May 30 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
Nov 17 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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连接oracle数据库的方法(测试成功)
2016/05/26 PHP
input按钮的事件处理大全
2010/12/10 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
javascript中创建对象的几种方法总结
2013/11/01 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
JS改变页面颜色源码分享
2018/02/24 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
node中IO以及定时器优先级详解
2019/05/10 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
[00:31]DOTA2上海特级锦标赛 Fnatic战队宣传片
2016/03/04 DOTA
python win32 简单操作方法
2017/05/25 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python无头爬虫下载文件的实现
2020/04/02 Python
html通过canvas转成base64的方法
2019/07/18 HTML / CSS
彪马英国官网:PUMA英国
2019/02/11 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
武汉英思工程科技有限公司–ORACLE面试测试题目
2012/04/30 面试题
银行职业规划书范文
2013/12/28 职场文书
公司感谢信范文
2015/01/22 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
新闻稿标题
2015/07/18 职场文书
2015年第31个教师节致辞
2015/07/31 职场文书
PHP中->和=>的意思
2021/03/31 PHP
浅谈Python数学建模之线性规划
2021/06/23 Python
MySQL系列之四 SQL语法
2021/07/02 MySQL