Vue Router 中如何配置 history 模式？

推荐答案

在 Vue Router 中配置 history 模式非常简单。你只需要在创建 Vue Router 实例时，将 mode 选项设置为 'history'。以下是一个示例代码：

// www.javascriptcn.com code example
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

本题详细解读

1. 什么是 history 模式？

Vue Router 默认使用 hash 模式，即 URL 中会带有 # 符号。而 history 模式则利用 HTML5 History API 来实现无 # 的 URL，使得 URL 看起来更加干净和直观。

2. 为什么要使用 history 模式？

• 美观：URL 中没有 #，看起来更加简洁。
• SEO 友好：搜索引擎对无 # 的 URL 更加友好，有助于提高页面的搜索排名。
• 更好的用户体验：用户可以直接访问某个子页面，而不需要从首页开始导航。

3. 配置 history 模式的步骤

1. 安装 Vue Router：确保你已经安装了 Vue Router，如果没有安装，可以使用以下命令进行安装：

   npm install vue-router

2. 创建 Router 实例：在创建 Vue Router 实例时，将 mode 选项设置为 'history'。

   // www.javascriptcn.com code example
   import Vue from 'vue';
   import Router from 'vue-router';
   import Home from './views/Home.vue';
   import About from './views/About.vue';
   
   Vue.use(Router);
   
   export default new Router({
     mode: 'history',
     routes: [
       {
         path: '/',
         component: Home
       },
       {
         path: '/about',
         component: About
       }
     ]
   });

3. 服务器配置：使用 history 模式时，需要确保服务器配置正确，以避免用户在直接访问某个子页面时出现 404 错误。通常需要在服务器上配置一个回退路由，将所有请求重定向到 index.html。

   • Nginx 配置示例：

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

   • Apache 配置示例：

     <IfModule mod_rewrite.c>
       RewriteEngine On
       RewriteBase /
       RewriteRule ^index\.html$ - [L]
       RewriteCond %{REQUEST_FILENAME} !-f
       RewriteCond %{REQUEST_FILENAME} !-d
       RewriteRule . /index.html [L]
     </IfModule>

4. 注意事项

• 服务器配置：使用 history 模式时，必须确保服务器配置正确，否则用户在直接访问某个子页面时可能会遇到 404 错误。
• 兼容性：HTML5 History API 在较旧的浏览器中可能不被支持，因此在某些情况下可能需要回退到 hash 模式。

通过以上步骤，你就可以在 Vue Router 中成功配置 history 模式，并享受它带来的好处。