【Vue】Vue路由-模式设置

问题

路由的路径看起来不自然, 有#，平时我们访问京东、淘宝，地址栏很少会出现 # ，能否切成真正路径形式?

• hash路由(默认) 例如: http://localhost:8080/#/home，在地址栏中是带 # 的

  底层基于a标签 锚链接 跳转去实现的

• history路由(常用) 例如: http://localhost:8080/home

  这个是基于新增的 html-history API去实现的。

  如果采用history模式，以后上线需要服务器端支持，即服务端去配置一些规则(修改Nginx配置)，如果不配置就会出现一些空白的情况

  开发环境webpack给规避掉了history模式的问题

---

语法

配置完之后，最终呈现的效果就是不带#的

const router = new VueRouter({// 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则mode: 'history',routes:[]
})