问题
路由的路径看起来不自然, 有#,平时我们访问京东、淘宝,地址栏很少会出现 # ,能否切成真正路径形式?
-
hash路由(默认) 例如: http://localhost:8080/#/home,在地址栏中是带 # 的
底层基于a标签 锚链接 跳转去实现的
-
history路由(常用) 例如: http://localhost:8080/home
这个是基于新增的 html-history API去实现的。
如果采用history模式,以后上线需要服务器端支持,即服务端去配置一些规则(修改Nginx配置),如果不配置就会出现一些空白的情况
开发环境webpack给规避掉了history模式的问题
语法
配置完之后,最终呈现的效果就是不带#的
js
const router = new VueRouter({
// 注意:一旦采用了 history 模式,地址栏就没有 #,需要后台配置访问规则
mode: 'history',
routes:[]
})