如何避免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>

5. 部署并测试

完成以上配置后，将项目部署到服务器，并通过访问不同路由来测试是否一切正常。

例如，访问 http://localhost:8081/home/sql 应该能够正确加载 /home/sql组件而不会出现 # 符号（此处是本地的环境）。

总结

通过使用 Vue Router 的 history 模式和适当配置服务器，可以避免 URL 中出现 # 符号，从而获得更友好、更美观的 URL 结构。

这不仅改善了用户体验，还有助于 SEO 优化。