Vue中如何把hash模式改为history模式

Vue中可以通过修改路由模式的方式，从默认的hash模式改为history模式。下面是具体的操作步骤：

Vue中可以通过修改路由模式的方式，从默认的hash模式改为history模式。下面是具体的操作步骤：

1. 修改路由模式

在Vue项目中找到router文件夹，打开index.js文件，找到路由实例的创建代码部分（通常代码会类似如下）：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

在路由实例的创建代码中，只需要增加一个mode属性并将其值设置为history就可以将路由模式修改为history模式。代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history', // 修改路由模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

2. 配置服务器

使用history模式后，需要在服务器上进行配置，否则当用户通过URL直接访问某个页面时，服务器会返回404错误。下面介绍两种方式，分别适用于在Nginx和Apache服务器上配置。

2.1. Nginx服务器配置

在Nginx服务器配置文件中增加如下代码：

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

这段代码的意思是，如果请求的文件不存在，则尝试查找同目录下的index.html文件，如果还不存在，则返回404错误。

2.2. Apache服务器配置

在Apache服务器的.htaccess文件中增加如下代码：

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

这段代码的意思是，如果请求的文件不存在，则尝试查找同目录下的index.html文件，如果还不存在，则返回404错误。

示例

下面是一个简单的路由实例，示例中包含两个路由：/和/about，使用history模式，并在Nginx服务器上进行了配置：

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: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

Nginx服务器配置文件中的相关部分代码如下：

server {
    listen 80;
    server_name your_domain;

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

    location /api {
        proxy_pass http://127.0.0.1:8000;
    }
}

这样做之后，就可以在项目中通过router-link标签切换页面了，例如：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

希望对你有所帮助！