如何去掉vue地址栏的

要去掉 Vue 应用程序中的地址栏哈希(#)，可以通过配置 Vue Router 来实现。1、使用 history 模式替代默认的 hash 模式，2、确保服务器配置支持 history 模式，3、确保路径回退策略配置正确。以下是详细描述其中一点：使用 history 模式替代默认的 hash 模式。Vue Router 默认使用 hash 模式，这会在 URL 中带有一个 # 符号。通过将 Vue Router 配置为使用 history 模式，可以去掉这个 # 符号，从而获得更漂亮的 URL。

一、使用 HISTORY 模式替代默认的 HASH 模式

为了去掉 Vue 应用中的 # 符号，需要在创建 Vue Router 实例时将 mode 设置为 '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);
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});
export default router;

通过设置 mode: 'history'，Vue Router 将使用 HTML5 的 History API 来创建干净的 URL，没有 # 符号。

二、确保服务器配置支持 HISTORY 模式

当使用 history 模式时，所有的路由请求都需要返回到 index.html，因此需要配置服务器确保任何路径都指向应用的入口文件。例如，在 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>

在 Nginx 中，可以通过以下配置：

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

这个配置确保所有的路径都重定向到 index.html，从而让 Vue Router 处理路由。

三、确保路径回退策略配置正确

在使用 history 模式时，需要确保在路径错误时提供合适的回退策略。可以在 Vue Router 中设置一个 catch-all 路由来处理不匹配的路径：

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '*',
      redirect: '/'
    }
  ]
});

这个 catch-all 路由将任何不匹配的路径重定向到根路径，从而确保应用不会因为找不到路径而崩溃。

四、验证和测试

在完成上述配置后，需要进行验证和测试，确保应用能够正确处理不同的路径：

访问根路径：确保 / 正常工作。
访问子路径：确保 /about 等子路径正常工作。
访问不存在的路径：确保 /nonexistent 之类的路径被正确重定向或处理。
刷新页面：确保在子路径上刷新页面时，应用仍然正常工作。

通过这些测试，可以确保配置正确，应用能够在没有 # 符号的情况下正常工作。

五、实例说明

假设有一个 Vue 应用，包含 Home 和 About 两个页面，默认路由如下：

const router = new Router({
  mode: 'hash',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
});

在 URL 中访问 About 页面时，地址栏会显示为 http://example.com/#/about。通过修改为 history 模式：

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

访问 About 页面时，地址栏会显示为 http://example.com/about，没有 # 符号，更加美观且易于阅读。

六、总结和建议

通过上述步骤，可以成功去掉 Vue 应用中的地址栏哈希(#)。1、使用 history 模式替代默认的 hash 模式，2、确保服务器配置支持 history 模式，3、确保路径回退策略配置正确。建议在实际应用中，严格按照上述步骤进行配置和测试，确保应用能够在不同路径下正常工作，并提供良好的用户体验。