vue路由默认使用什么模式

Vue路由默认使用的是哈希模式。这是因为哈希模式利用 URL 的哈希（#）部分，能够在不重新加载页面的情况下改变视图。哈希模式在大多数情况下是默认且推荐的选择，特别是在服务器配置不允许或不支持 HTML5 History 模式时。

一、哈希模式的工作原理

哈希模式利用 URL 中的哈希部分（#）来保持应用的状态和视图同步。具体来说，哈希模式的 URL 形式如 http://example.com/#/home。当哈希改变时，页面不会重新加载，只会改变视图。

哈希模式的优点：

1、兼容性强：哈希模式在所有浏览器中都能正常工作，无需服务器配置。
2、简单易用：不需要对服务器进行任何特殊配置，适合前端开发者快速搭建项目。

哈希模式的缺点：

1、不美观：URL 中的 # 符号使得链接不够美观。
2、SEO问题：搜索引擎爬虫不易抓取带有 # 的 URL，可能影响 SEO 效果。

二、HTML5 History 模式

除了哈希模式，Vue Router 还支持 HTML5 History 模式。HTML5 History 模式使用的是浏览器的 history.pushState 和 history.replaceState 方法来操作 URL，而不需要重新加载页面。

History 模式的优点：

1、URL 美观：没有 # 符号，URL 看起来更简洁、美观。
2、更好的 SEO：由于 URL 结构与传统页面类似，搜索引擎更容易抓取。

History 模式的缺点：

1、需要服务器配置：需要在服务器端进行配置，以确保所有的路由请求都指向应用的入口文件。例如，Nginx 需要配置重写规则。

location / {
  try_files $uri $uri/ /index.html;
}

三、如何在 Vue 项目中使用 History 模式

在 Vue 项目中使用 HTML5 History 模式非常简单，只需在创建 Vue Router 实例时配置 mode 属性为 history 即可。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

配置完成后，你需要确保你的服务器能够正确处理所有路由请求并指向你的入口文件（通常是 index.html）。

四、如何在 Vue 项目中使用哈希模式

默认情况下，Vue Router 使用的是哈希模式。如果你想明确指定使用哈希模式，可以在创建 Router 实例时将 mode 设置为 hash。

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
  mode: 'hash',
  routes: [
    // 路由配置
  ]
});

这种配置方式下，所有路由请求都会以 # 作为前缀，适合不需要服务器配置的小型项目或者前后端分离的项目。

五、选择合适的路由模式

选择哪种路由模式取决于你的项目需求和环境配置。

项目需求：

小型项目或快速搭建：选择哈希模式，配置简单，无需服务器端支持。
需要美观 URL 和良好 SEO：选择 HTML5 History 模式，需配置服务器重写规则。

环境配置：

服务器支持：如果你的服务器能够配置重写规则，推荐使用 HTML5 History 模式。
浏览器兼容性：哈希模式兼容性更好，不需要担心旧浏览器的问题。

六、实例说明

假设你在开发一个博客应用，需要使用 Vue Router 来管理不同页面之间的导航。

哈希模式：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Post from '@/components/Post';
Vue.use(Router);
export default new Router({
  mode: 'hash',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/post/:id',
      component: Post
    }
  ]
});

在此配置下，访问某篇文章时的 URL 会是 http://example.com/#/post/1。

HTML5 History 模式：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import Post from '@/components/Post';
Vue.use(Router);
export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/post/:id',
      component: Post
    }
  ]
});

在此配置下，访问某篇文章时的 URL 会是 http://example.com/post/1，需要确保服务器配置正确。

总结

Vue 路由默认使用的是哈希模式，这种模式简单易用，兼容性强，适合大多数前端项目。然而，如果你有更高的 SEO 要求或者需要更美观的 URL，可以选择 HTML5 History 模式，但需要相应的服务器配置支持。了解两种模式的优缺点并根据项目需求选择合适的路由模式，可以让你的 Vue 项目更加高效和专业。