浅谈vue项目,访问路径#号的问题

 更新时间:2020年08月14日 14:53:42   作者:快乐的小三菊  
这篇文章主要介绍了浅谈vue项目,访问路径#号的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

刚入手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 项目中的几个实用组件(ts)

    详解Vue 项目中的几个实用组件(ts)

    这篇文章主要介绍了详解Vue 项目中的几个实用组件(ts),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue2.0多条件搜索组件使用详解

    vue2.0多条件搜索组件使用详解

    这篇文章主要为大家详细介绍了vue2.0多条件搜索组件的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • vue弹出框组件封装实例代码

    vue弹出框组件封装实例代码

    这篇文章主要介绍了vue弹出框组件封装,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • Vuex实现简单购物车

    Vuex实现简单购物车

    这篇文章主要为大家详细介绍了Vuex实现简单购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • Vue一次性简洁明了引入所有公共组件的方法

    Vue一次性简洁明了引入所有公共组件的方法

    这篇文章主要介绍了Vue一次性简洁明了引入所有公共组件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • Vue中extends继承和组件复用性详解

    Vue中extends继承和组件复用性详解

    这篇文章主要给大家介绍了关于Vue中extends继承和组件复用性的相关资料,组件(Component)是Vue.js最强大的功能之一,组件可以扩展HTML元素,封装可重用的代码,需要的朋友可以参考下
    2023-11-11
  • Vue列表渲染v-for的使用案例详解

    Vue列表渲染v-for的使用案例详解

    这篇文章主要介绍了Vue列表渲染(v-for的使用),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03
  • vue项目中的支付功能实现(微信支付和支付宝支付)

    vue项目中的支付功能实现(微信支付和支付宝支付)

    本文主要介绍了vue项目中的支付功能实现(微信支付和支付宝支付),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Nuxt的路由动画效果案例

    Nuxt的路由动画效果案例

    这篇文章主要介绍了Nuxt的路由动画效果案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中Form 表单的 resetFields() 失效原因及问题解决

    vue中Form 表单的 resetFields() 失效原因及问题解决

    在Vue项目中,使用formRef.value.resetFields()方法重置表单时可能遇到不起作用的问题,下面就来介绍一下如何解决,感兴趣的可以了解一下
    2024-09-09

最新评论