vue history

// Vue Router 使用 history 模式的示例代码

// 1. 安装 Vue Router
// npm install vue-router

// 2. 创建 router.js 文件
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(Router);

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

// 3. 在 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');

// 解释说明：
// - `mode: 'history'` 启用了 HTML5 History 模式，它会利用 HTML5 的 History API (pushState, replaceState) 来实现 URL 导航，而不会在 URL 中带上 `#`。
// - 这种模式下，URL 看起来更加美观和友好，类似于传统的服务器端渲染应用的 URL。
// - 注意：使用 history 模式时，需要确保服务器正确配置，以便所有客户端请求都指向同一个入口文件（通常是 `index.html`），否则可能会导致页面刷新时出现 404 错误。