VUE中，使用 History 模式，如何访问所有的路由

源码资源网

VUE中，使用 History 模式，如何访问所有的路由
在 Vue 中使用 History 模式时，访问所有路由的关键在于确保你的 Web 服务器正确配置，以便能够处理所有的路由请求并将其重定向到  `index.html` 。下面是如何实现这一点的步骤：
### 1. 配置 Vue Router
首先，在 Vue Router 中设置为 History 模式：

1. import Vue from 'vue';
   
2. import Router from 'vue-router';
   
3. import Home from './components/Home.vue';
   
4. import About from './components/About.vue';
   
5. import Contact from './components/Contact.vue';
   
6. Vue.use(Router);
   
7. const router = new Router({
   
8.   mode: 'history', // 使用 History 模式
   
9.   routes: [
   
10.     { path: '/', component: Home },
    
11.     { path: '/about', component: About },
    
12.     { path: '/contact', component: Contact }
    
13.   ]
    
14. });
    
15. export default router;

复制代码

### 2. 配置 Web 服务器
不同的 Web 服务器有不同的配置方式，以下是一些常见的 Web 服务器配置示例：
#### Nginx
如果你使用 Nginx，可以在 Nginx 的配置文件中添加以下内容：

1. nginx
   
2. server {
   
3.     listen 80;
   
4.     server_name your_domain.com;
   
5.      location / {
   
6.         root /path/to/your/dist; # 指向你的 dist 文件夹
   
7.         try_files $uri $uri/ /index.html; # 重定向到 index.html
   
8.     }
   
9. }

复制代码

#### Apache
如果你使用 Apache，可以在项目根目录下创建一个  `.htaccess`  文件，并添加以下内容：

1. apache
   
2. <IfModule mod_rewrite.c>
   
3.     RewriteEngine On
   
4.     RewriteBase /
   
5.     RewriteRule ^index\.html$ - [L]
   
6.     RewriteCond %{REQUEST_FILENAME} !-f
   
7.     RewriteCond %{REQUEST_FILENAME} !-d
   
8.     RewriteRule . /index.html [L]
   
9. </IfModule>

复制代码

#### Node.js (Express)
如果你使用 Node.js 和 Express，可以使用以下代码：

1. const express = require('express');
   
2. const path = require('path');
   
3. const app = express();
   
4. const port = process.env.PORT || 8080;
   
5. app.use(express.static(path.join(__dirname, 'dist')));
   
6. app.get('*', (req, res) => {
   
7.     res.sendFile(path.join(__dirname, 'dist', 'index.html'));
   
8. });
   
9. app.listen(port, () => {
   
10.     console.log(`Server is running on http://localhost:${port}`);
    
11. });

复制代码

### 3. 访问路由
配置完成后，你可以通过以下方式访问不同的路由：
- 首页： `http://your-domain.com/`
- 关于页面： `http://your-domain.com/about`
- 联系页面： `http://your-domain.com/contact`
### 总结
在 Vue 中使用 History 模式时，确保你的 Web 服务器能够处理所有路由请求并重定向到  `index.html` ，这样就可以正常访问所有路由了。