如何避免vue的url中使用hash符号？

1. 安装 Vue Router

2. 配置 Vue Router 使用 history 模式

3. 更新 main.js

4. 配置服务器以支持 history 模式（此处需要仔细测试）

a. Nginx 配置

b. Apache 配置

5. 部署并测试

总结

在 Vue.js 项目中，避免 URL 中出现 # 符号的方法是使用 Vue Router 的 history 模式。默认情况下，Vue Router 使用 hash 模式，这会在 URL 中添加一个 # 符号，例如 http://www.sqlynx.com/#/home。

通过切换到 history 模式，可以实现更友好的 URL 结构，如 http://www.sqlynx.com/home。

以下是详细的步骤：

1. 安装 Vue Router

如果还没有安装 Vue Router，可以通过以下命令进行安装：

npm install vue-router

2. 配置 Vue Router 使用 `history` 模式

在 Vue 项目的 src 目录下，找到或创建 router/index.js 文件，并配置 Vue Router 使用 history 模式。

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';

Vue.use(Router);

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

3. 更新 `main.js`

确保在 main.js 中正确引入并使用路由配置：

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

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

4. 配置服务器以支持 `history` 模式（此处需要仔细测试）

当使用 history 模式时，前端路由需要服务器的支持，因为直接访问嵌套路由时，服务器需要正确地返回 index.html 文件。以下是常见的服务器配置示例：

a. Nginx 配置

在 Nginx 配置文件中添加以下内容：

server {
    listen 80;
    server_name yourdomain.com;

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

b. 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>