vue-router有什么模式

Vue-router有三种模式：hash模式、history模式和abstract模式。

1. Hash模式：在URL中加上'#'符号作为路由的标识符。例如，http://www.example.com/#/home。在浏览器中，这种模式可以实现前端路由的跳转，并且可以通过监听hash的变化来实现页面的刷新。但是，使用hash模式会造成URL看起来不够清晰，且搜索引擎的爬虫不能够解析hash路由中的内容。

2. History模式：以一个普通的URL形式进行路由的跳转，例如http://www.example.com/home。这种模式可以使用浏览器的History API来实现前端路由的跳转和页面的刷新。相比于hash模式，history模式的URL看起来更加友好，也更加符合常规的URL习惯。但是，history模式需要服务器的支持，当用户直接访问某个URL时，需要服务器返回对应的页面。

3. Abstract模式：抽象模式，也称为非浏览器环境模式。适用于非浏览器环境下的应用，比如移动端应用、Electron等。在抽象模式下，我们可以自定义路由的过渡方式和动画效果。

根据实际需求，可以选择其中一种或多种模式来进行前端路由的配置。

Vue-router有三种不同的模式：hash模式、history模式和abstract模式。

1. Hash模式：
   在hash模式下，URL中会以#符号开始，后面跟着一个路由标识。例如：http://example.com/#/home。这种模式是通过监听浏览器的hash变化来实现路由的切换，可以在不重新请求页面的情况下实现路由的刷新和切换。优点是兼容性好，可以支持几乎所有浏览器，并且在单页面应用中使用较为方便。缺点是在URL中带有#符号，不够美观，并且在SEO优化方面不太友好。

2. History模式：
   在history模式下，URL中没有任何特殊字符，直接就是路由路径。例如：http://example.com/home。这种模式通过使用HTML5 History API来实现路由的切换，可以在不刷新页面的情况下，改变URL并加载新的路由组件。优点是URL美观，更符合传统的网页链接格式，并且可以使用浏览器的前进和后退按钮进行导航。缺点是需要服务器端的支持，以防止在刷新页面时出现404错误，而且在低版本浏览器中可能不兼容。

3. Abstract模式：
   Abstract模式不会改变URL，而是在内存中直接进行路由的切换，用于非浏览器环境，例如Node.js环境。它不依赖于浏览器的API，可以通过编程的方式来进行路由的导航和切换。这种模式不需要处理URL的变化和兼容性问题，适用于一些特定的应用场景。

通过配置Vue-router的mode选项，可以选择使用以上的任一模式。默认情况下，Vue-router使用hash模式，但也可以通过配置来选择其他模式。

Vue-router有三种模式：hash模式、history模式和abstract模式。

1. hash模式：默认模式。在浏览器URL中使用带有#/的URL片段来模拟一个完整的URL路径。当URL的#后面的部分发生变化时，页面不会重新加载。hash模式最大的优点是支持所有浏览器，包括不支持HTML5的旧浏览器。使用hash模式，可以通过监听window对象的hashchange事件来实现前端路由的跳转。

2. history模式：通过使用HTML5的history API来实现前端路由。在HTML5中，history API提供了一系列方法和属性，可以操作浏览器的历史记录。在history模式下，URL中不再需要使用#字符，而是直接使用正常的URL路径。history模式的优点是URL更加美观，不再有#符号，并且可以使用浏览器提供的前进和后退功能来控制路由的跳转。但是需要注意的是，使用history模式时，需要服务器端的支持，即在服务器端配置一个fallback页面，用于处理当直接访问前端路由时的请求。

3. abstract模式：不依赖于浏览器的URL，而是将路由信息保存在内存中。这种模式在测试环境中使用非常方便，并且也可以用于在非浏览器环境下开发的应用程序。

要在Vue-router中使用某种模式，需要在创建路由对象时进行配置。例如，在创建路由对象时，使用hash模式的代码如下：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
});

export default router;

使用history模式和abstract模式时，只需将mode配置项的值改为'history'或'abstract'即可。