我们在采用vue-cli 自动构建的vue脚手架开发项目时,前后端分离一般会使用vue-router来配置路由,这时我们会发现在路径中会有#的字段,总感觉很别扭。
http://localhost:8080/#/
其实vue-router有两种模式,hash模式和history模式,带#的是hash模式,不带#的则是history模式,vue-router默认为hash模式,所以这里我们主要将其改为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'
Vue.use(Router)
export default new Router({
mode:'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
})