vue项目如何去掉URL中#符号的方法

Vue.js是一个采用渐进式开发的JavaScript框架，路由系统使用的是Vue Router，该路由系统默认使用URL中的 "#"(hash) 字符来控制页面的跳转。但是，在某些场景下，我们想要去掉URL中的 # 符号。这里提供两种去掉 URL 中 # 符号的方法。

方法一：使用HTML5 History模式

HTML5 History模式会使用HTML5 History API来操作路由，它通过修改URL中的路径来实现路由的切换，同时为了保证用户体验，在浏览器不支持HTML5 History API的情况下，自动降级为使用hash模式。在Vue.js中，我们可以通过配置Vue Router来开启HTML5 History模式。具体步骤如下：

1. 在router.js中配置mode为history模式

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})

2. 为应用程序配置404页面

当进行页面跳转时，如果找不到对应的路由，则会进入到404页面。对于使用HTML5 History模式的Vue应用程序，需要配置404页面，否则直接通过URL访问路由时可能会直接返回404错误。可以在router.js文件中添加如下代码：

export default new Router({
  mode: 'history',
  routes: [
    // 添加404页面路由
    {
      path: '*',
      name: '404',
      component: () => import('@/views/404.vue')
    },
    ...
  ]
})

3. 配置服务器

需要确保在服务器上，无论用户访问的是哪个路由，在返回HTML文件时都要返回同一个文件，这就需要对服务器进行一下配置。

• 对于Apache服务器，需要开启mod_rewrite扩展模块，并在.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服务器，需要在服务器配置文件中添加如下代码：

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

方法二：修改默认Vue配置

我们还可以通过修改默认Vue配置来实现去掉URL中 # 符号的效果。

1. 在main.js中配置路由的默认后缀为html

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

// 配置路由的默认后缀为html
Vue.prototype.$routerReplace = function(to) {
  const found = String(router.history.basePath + to)
  window.location.replace(found.endsWith('.html') ? found : found + '.html')
}

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

2. 修改router.js中Router原型对象下的replace方法，调用Vue.prototype.$routerReplace来跳转路由

Vue.use(Router)

// 修改replace方法
Router.prototype.replace = function replace(location, onComplete, onAbort) {
  const lastRoute = this.currentRoute
  this.history.replace(location, onComplete, function onReady() {
    const route = this.currentRoute
    if (route.matched.length === 0) {
      // not_found页面，防止进入死循环
      this.replace(lastRoute.fullPath || '/')
    }
    // 调用Vue.prototype.$routerReplace来跳转路由
    Vue.prototype.$routerReplace(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}

3. 修改router.js中Router原型对象下的push方法，调用Vue.prototype.$routerReplace来跳转路由

Vue.use(Router)

// 修改push方法
Router.prototype.push = function push(location, onComplete, onAbort) {
  const lastRoute = this.currentRoute
  this.history.push(location, onComplete, function onReady() {
    const route = this.currentRoute
    if (route.matched.length === 0) {
      // not_found页面，防止进入死循环
      this.replace(lastRoute.fullPath || '/')
    }
    // 调用Vue.prototype.$routerReplace来跳转路由
    Vue.prototype.$routerReplace(route.fullPath)
    onComplete && onComplete(route)
  }, onAbort)
}

这样配置之后，就可以实现不需要 # 符号的URL路由效果。

示例

此处提供两个示例，一个采用HTML5 History模式，另一个是通过修改默认Vue配置来实现的。

采用HTML5 History模式

可以参考官方文档进行配置，具体步骤如下：

1. 在router.js中配置mode为history模式
2. 为应用程序配置404页面
3. 配置服务器

修改默认Vue配置

可以在main.js和router.js中进行配置，具体步骤如下：

1. 在main.js中配置路由的默认后缀为html
2. 修改router.js中Router原型对象下的replace方法，调用Vue.prototype.$routerReplace来跳转路由
3. 修改router.js中Router原型对象下的push方法，调用Vue.prototype.$routerReplace来跳转路由

这两种方法都可以实现去掉URL中 # 符号的效果，具体选择哪种方法要根据实际情况来决定。