笔记 | vue-cli项目如何去除路径中的#

介绍

我们在采用vue-cli自动构建vue脚手架开发项目时候，前后端分离一般会使用vue-router来配置路由，这时候我们会发现在路径中会带有#的字段，如下：

http://localhost:8080/#/

其实vue-router有两种模式，hash模式和history模式，带＃的是hash模式，不带#的则是history模式，vue-router默认为hash模式，所以这里我们主要将其改为history模式即可。

• URL的hash
• HTML5的history

history 模式充分利用 history.pushState API 来完成 URL 跳转而无需重新加载页面。

http://localhost:8080/

那么怎么来实现呢，很简单，只要将router中的mode设置为history就可以了。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

/* Layout */
import Layout from '@/layout/Layout' //引入想要的组件

//1、注入插件
Vue.use(Router)

//2、定义路由
export const constantRouterMap = []

//创建路由实例，且导出router实例
export default new Router({
    // mode: 'hash',
    mode: 'history',
    routes: constantRouterMap
})