介绍Vue router的history模式以及如何配置history模式

引言

Vue router给我们提供了两种路由模式，分别是hash模式和history模式。其中默认是使用hash模式，即URL中带有一个#符号，但是处于业务或个人喜爱的差别，Vue router也提供了history模式。但是由于Vue是单页SPA应用，所以每个路由并没有对应的html文件。

什么是history模式

history模式特点

• history模式使用浏览器的history API来管理路由状态，而不是依赖于URL中的哈希。
• 在history模式下，URL看起来更加整洁，没有#符号。例如，http://example.com/user/profile。
• history模式可以在不刷新整个页面的情况下，通过改变URL来切换页面，实现更加流畅的用户体验

history模式的优缺点

优点：

1. 更友好的URL：history模式下的URL看起来更加整洁，没有特殊字符（如#），给用户提供了更好的阅读体验。
2. 无刷新页面切换：使用history模式时，页面切换不会导致整个页面的刷新，仅仅改变URL，从而实现更加流畅的用户体验。
3. 更好的SEO：搜索引擎对于history模式下的页面更容易进行抓取和索引，因为URL更加直观、语义化。
4. 路由传参更方便：相比hash模式的URL传参，history模式下的传参更加直观简洁，参数可以直接通过URL的路径进行表示。

缺点：

1. 服务器配置要求：使用history模式需要服务器的支持，因为URL改变时，要确保服务器能正确地展示相应的页面，需要进行一些额外的服务器配置。
2. 兼容性问题：history模式在一些旧版本的浏览器（如IE9及以下）中不被支持，如果要兼容这些浏览器，可能需要降级为hash模式。
3. 开发环境要求：当使用history模式时，需要在开发环境中配置一个服务器来模拟URL的请求，以确保路由正常运行，相比hash模式需要更多的配置。

如何配置Vue Router使用history模式

- 首先我们需要创建一个Vue项目
   - 安装Vue Router

npm i vue-router

- 在Vue项目中配置Vue Router使用history模式

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

4. 服务器配置
      - 配置服务器，使得所有路由的URL都指向入口页面，我们用nginx配置举例：

server {
  listen 80;
  server_name your_domain.com;
  root /path/to/your/vue_app/dist;
  index index.html;
  location / {
    try_files $uri $uri/ /index.html;
  }
}
 
# 在以上配置中，需要进行以下调整：
# 1. server_name：将your_domain.com替换为您的域名。
# 2. root：将/path/to/your/vue_app/dist替换为您的Vue应用的编译输出目录。
# 3. index：确保index.html是您的Vue应用的入口页面。
 
# 配置解释：
# • location /：此处表示对所有的请求都生效。
# • try_files $uri $uri/ /index.html：当请求的文件或目录不存在时，将请求重定向到index.html。这使得所有的路由请求都指向了Vue应用的入口页面，使得应用能够正确地处理动态路由。

处理404页面

// 在路由配置中定义一个名为NotFound的路由
const routes = [
  // 其他路由配置...
  { path: '/404', name: 'NotFound', component: NotFoundComponent },
  { path: '*', redirect: '/404' }
]
 
// 创建Vue Router实例并将路由配置应用于它
const router = new VueRouter({
  mode: 'history',
  routes
})
 
// 导航守卫用于捕获404错误
router.beforeEach((to, from, next) => {
  // 如果目标路由不存在，重定向到404页面
  if (to.matched.length === 0) {
    next('/404');
  } else {
    next();
  }
})

配置publicPath

如果你希望你的Vue应用打完包以后，所有路由的前缀都加上/v1/test，那么你需要对原有的配置做一下修改

vue.config.js

publicPath这里需要判断一下是否为生产环境，如果是生产环境，我们需要加上前缀，这样在读取js、css等文件时才能访问到正确的路径。如果是开发环境，基本URL配置为'/'即可。在开发环境中，我们的应用通常运行在一个本地的开发服务器上（例如：localhost:8080），而不是真实的生产环境服务器（例如：https://www.example.com）。因此，'/'可以作为根路径来访问我们的应用，而不需要添加任何前缀。

module.exports = {
  // 部署应用包的基本URL
  publicPath: process.env.NODE_ENV === 'production' ? '/v1/test/' : '/',
  devServer: {
    port: 8080,
    open: true,
    proxy: {}
  }
}

nginx配置

server {
  listen 80;
  server_name your_domain.com;
  root /path/to/your/vue_app/dist;
  index index.html;
  location /v1/test { # 这里location需要加上/v1/test
    try_files $uri $uri/ /index.html;
  }
}