目录
2. 配置 Vue Router 使用 history 模式
4. 配置服务器以支持 history 模式（此处需要仔细测试）
在 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 优化。
