vue实战开发001:如何去除路径中的 #/

       我们在采用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
    }
  ]
})

猜你喜欢

转载自blog.csdn.net/kevinfan2011/article/details/83832228