vue将哈希路由改为history路由

要将 Vue 的哈希路由（hash mode）改为 history 路由（history mode），可以按照以下步骤进行操作：

1. 首先，确保您的项目已经安装了 Vue Router。如果尚未安装，可以使用以下命令进行安装：

npm install vue-router

2. 在项目的主入口文件（一般是 `main.js`）中导入 Vue Router，并创建一个路由实例：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history', // 设置为 history 路由模式
  routes: [
    // 定义路由
    // ...
  ],
});

new Vue({
  render: (h) => h(App),
  router, // 将路由实例添加到根组件中
}).$mount('#app');

注意，这里的关键是将 `mode` 设置为 `'history'`。

3. 在服务器端进行配置，以确保在使用 history 路由时能够正确处理路由请求。这是因为在 history 路由模式下，直接访问某个路由路径时，服务器需要返回对应的页面。例如，在使用 Node.js/Express 作为服务器时，可以添加如下配置：

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(path.join(__dirname, 'dist')));

// 处理所有路由请求，返回 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

这样，当用户直接访问某个路由路径时，服务器会返回 `index.html`，然后在客户端由 Vue Router 接管路由的处理。

4. 最后，根据您的需求，使用 Vue Router 的路由功能进行定义和使用路由。

这样，您就成功将 Vue 的哈希路由改为了 history 路由。记得在切换路由时，不再出现 `#` 符号，URL 更加美观。