Vue Router 不同的历史记录模式

不同的历史记录模式

不同的历史模式

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

Vue 3.0

Hash模式

使用createWebHashHistory()创建

import {createRouter, createWebHashHistory} from 'vue-router'
const router = createRouter({
    history:createWebHashHistory(),
    routes
})

HTML5模式

使用createWebHistory()创建

import {createRouter, createWebHistory} from 'vue-router'
const router = createRouter({
    history: createWebHistory(),
    routes
})

Vue 2.0

Hash模式

const router = new VueRouter({
    mode: 'hash',
    routes
})

History模式

const router = new VueRouter({
    mode: 'history',
    routes
})

 总结：

Hash模式在内部传递的实际URL之前使用了一个哈希字符(#)。由于这部分URL从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。vue-router默认Hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。但它在SEO(搜索引擎优化)中确实有不好的影响，若担心这个问题，可以使用HTML5模式。

History模式的URL会看起来很‘正常’，没有哈希字符。History模式充分利用history.pushState API来完成URL跳转而无需重新加载页面。但由于我们的应用是一个单页的客户端应用，若没有适当的服务器配置，用户在浏览器中直接访问，就会得到一个404错误。刷新会404，因为History模式使用真正的页面网址当做路径，一刷新，客户端会拿着这个完整的页面地址去服务器找，但该网址找不到，毕竟这个路径和对应页面都配置在前端。而Hash模式的#将后面路径认定是前端配置的路径，所以不会去后端找。如果想正常使用History模式，可以让后端配置nginx服务器，做路径处理(在服务器上添加一个简单的回退路由，若URL不匹配任何静态资源，它提供与你的应用程序中的index.html相同的页面)。

 服务器配置示例(针对History模式)

不涉及前端，略。详细内容看Vue Router文档。

注：服务器这么配置以后，就不会再返回404错误页面，因为对于所有路径都会返回index.html，然后再到前端去找对应路径资源，但是这里又存在一个问题，即使输错了url，也不会报错，而是会跳转到index.html，这是不对的，因为输错了url，就是应该返回404，所以前端还要再在vue route中配置一个能覆盖所有情况的路由，然后给出一个404页面：

{
        path: '*',
        component: NotFoundComponent
}

当然，path:'*'这个路由配置肯定要写在最后了，只有前面的路由配置都没被映射到，才会被匹配到这里，不然写在前面的话，所有路径直接都匹配404了。