Vue Router(8)

2022-02-17 13:01:12 阅读：141 来源： 互联网

标签：Vue URL router 模式服务器 createWebHistory createRouter Router

在创建路由器实例时，history 配置允许我们在不同的历史模式中进行选择

Hash模式

hash 模式是用 createWebHashHistory() 创建的

import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

它在内部传递的实际URL之前使用了一个哈希字符（#）。由于这部分URL从未发送到服务器，所以它不需要再服务器层面上进行任何特殊处理。不过，它在SEO中确实有不好的影响。如果你担心这个问题，可以使用HTML5模式。

HTML5模式

用 createWebHistory() 创建HTML5模式，推荐使用这个模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

当使用这种历史模式时，URL会看起来很正常

不过，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到404错误。

要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果URL不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面

标签：Vue,URL,router,模式,服务器,createWebHistory,createRouter,Router
来源： https://www.cnblogs.com/zhishiyv/p/15904161.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue Router(8)