Vue.js / Vue 路由器 - 如果我使用 cdn，如何从 url 中删除 hashbang #？

Question

我无法使用带有 CDN 的 vue 路由器从 url 中删除 hashbang #。例如，我有 url example.com/#/about 我想将其设置为这样：example.com/about

我尝试将 VueRouter.createWebHashHistory() 更改为 VueRouter.createWebHistory() 但它不起作用。虽然使用 VueRouter.createWebHashHistory() 它可以工作，但 url 有 hashbang #.

我的代码：

const app = Vue.createApp({
  data() {
    return {
      title: "Vue routing",
    }
  }
});

const Home = {
  template: `<h1> Home</h1>`
};
const About = {
  template: `<h1> About</h1>`
};
const Portfolio = {
  template: `<h1> Portfolio</h1>`
};
const Contact = {
  template: `<h1> Contact</h1>`
};

const routes = [{
    path: "/",
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/portfolio",
    component: Portfolio
  },
  {
    path: "/contact",
    component: Contact
  },
  {
    path: "/post/:id",
    component: Contact
  }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(), //VueRouter.createWebHistory() doesn't work
  routes
})

document.title = 'test';

app.use(router)
app.mount('#app5')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-router@4"></script>


<div id="app5">
  <h1>{{ title }}</h1>

  <!-- i links -->
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <router-link to="/portfolio">Portfolio</router-link>
  <router-link to="/contact">Contact</router-link>
  <router-link to="/post/5">Post 5</router-link>
  <router-link to="/post/7">Post 7</router-link>

  <!-- contenitore per il HTML -->
  <router-view></router-view>
</div>

Answer 1

您似乎正在使用 Vue 3 和 Vue Router 4。当您想从 URL 中删除哈希 (#) 并使用干净的 URL 时，您应该使用 createWebHistory() 而不是 createWebHashHistory()。

如果您在使用 createWebHistory() 时遇到问题，可能是由于服务器的配置造成的。使用 createWebHistory() 时，您需要确保服务器配置为正确处理客户端路由。这涉及确保服务器返回所有路由的主 index.html 文件，从而允许 Vue Router 接管并处理客户端的路由。

您可以遵循以下几个步骤：

确保服务器配置：

确保您的服务器配置为返回所有路由的index.html 文件。 如果您使用的是像 Express 这样的服务器，您可能需要添加通配符路由来处理所有路由。 配置服务器以处理历史模式：

如果您要将应用程序部署到服务器，请确保将其配置为支持历史记录模式。在 Apache 中，您可以使用 mod_rewrite 模块。 以下是如何配置 Express.js 以使用历史记录模式的示例：

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

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

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

确保根据您的项目结构调整路径和配置。

验证浏览器支持： 确保您正在测试的浏览器支持 HTML5 History API。所有现代浏览器都支持它，但如果您在较旧的浏览器中进行测试，可能会出现问题。 进行这些调整后，使用 createWebHistory() 应该可以按预期工作，并且您应该能够从 URL 中删除哈希值。