Vue history和hash模式

目录

  • 一、简介

一、简介

         ~~~~~~~~         在Vue.js中,路由模式是用来管理应用程序中不同页面之间的导航的机制。Vue Router支持两种常见的路由模式:history模式和hash模式。

  1. History 模式:
             ~~~~~~~~         History模式使用浏览器的history.pushState API 来管理路由。它通过修改浏览器的URL来实现导航,而不会产生像hash模式那样的"#"符号。

    ①使用History模式的优点:

    • 更加美观的URL:URL不包含"#"符号,看起来更加清晰、美观。
    • 更自然的导航:URL看起来像传统的URL,更符合用户习惯。

    ②使用History模式的缺点:

    • 需要服务器支持:因为使用history模式时,浏览器的URL会发生变化,所以需要服务器配置以确保在直接访问URL时能够正确响应。

    启用History模式,你需要在Vue Router的初始化中设置mode为history:

    const router = new VueRouter({
    	  mode: 'history',
    	  routes: [
    	    // 路由配置
    	  ]
    });
    
  2. Hash 模式
           ~~~~~~       Hash模式使用浏览器的URL中的"#“符号来实现导航。当URL中的hash改变时,不会触发页面刷新,而会通过监听hashchange事件来更新视图。
    ①使用Hash模式的优点:
             ~~~~~~~~         兼容性好:不需要服务器特殊配置,兼容性更好。
             ~~~~~~~~         简单易用:不需要额外的服务器配置,即可开始使用。
    ②使用Hash模式的缺点:
             ~~~~~~~~         URL中包含”#"符号:URL看起来不太美观,可能不如history模式那样友好。
    启用Hash模式,是Vue Router的默认模式,你不需要特别设置,除非你想使用history模式。

总之,Vue Router的history模式和hash模式在URL展示和浏览器支持方面有所不同,你可以根据项目需求选择适合的路由模式。

你可能感兴趣的:(Vue,vue.js,哈希算法,javascript)