【Vue】Vue路由-模式设置

作者 : admin 本文共392个字，预计阅读时间需要1分钟发布时间： 2024-06-7 共1人阅读

问题

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

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:[]
})

分享到：

E-->