相关推荐recommended
Vue项目路由路径中去掉#
作者:mmseoamin日期:2024-01-19

在Vue中,有两种常见的路由模式:哈希模式(Hash Mode)和历史模式(History Mode)。

  1. 哈希模式(Hash Mode):

    • 使用URL中的#号来模拟路由。例如:http://example.com/#/about
    • 哈希符号后面的内容被称为哈希路径,在路由器中用于对应不同的组件或页面。
    • 哈希模式的优点是兼容性好,可以在不同的浏览器和服务器上正常工作。
    • 哈希模式的缺点是URL中包含#号,影响美观性。
  2. 历史模式(History Mode):

    • 使用HTML5 History API来实现路由,不需要URL中的#号。例如:http://example.com/about
    • 历史模式使用浏览器的pushState和replaceState方法来修改URL,但不会触发页面的刷新。
    • 历史模式的优点是URL更加美观,没有#号的干扰。
    • 历史模式的缺点是在刷新页面或直接访问某个子页面时,如果后端服务器未正确配置,可能会导致404错误。

要在Vue项目中选择路由模式,在创建Vue Router实例时,可以通过mode参数进行设置。例如:

export default new Router({
  mode:'history',
  routes: []
    })

需要注意的是,在使用历史模式时,还需要进行相应的服务器配置,以确保在刷新页面或直接访问某个子页面时能正确返回对应的HTML文件。具体配置方法根据使用的后端服务器而定。