浅谈vue项目,访问路径#号的问题
程序员文章站
2022-07-03 17:50:01
刚入手vue,有好多的疑问,目前遇到的是vue项目启动之后,输入http://ip:port,我发现浏览器里面显示的地址栏竟然是http://ip:port/#/,这个”/#/“不知道是什么东西,于是...
刚入手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项目,访问路径#号的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: Android经典四种布局
下一篇: android studio下多渠道打包
推荐阅读
-
解决vue-cli项目打包出现空白页和路径错误的问题
-
解决vue项目使用font-awesome,build后路径的问题
-
解决vue-cli项目webpack打包后iconfont文件路径的问题
-
解决vue+springboot前后端分离项目,前端跨域访问sessionID不一致导致的session为null问题
-
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
-
解决vue-cli项目打包出现空白页和路径错误的问题
-
解决vue-cli项目webpack打包后iconfont文件路径的问题
-
解决vue项目使用font-awesome,build后路径的问题
-
Tomcat去掉项目名后,访问路径依旧有问题的解决方案
-
关于Vue背景图打包之后访问路径错误问题的解决