【Vue】Vue路由-模式设置

问题

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

  • 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:[]
})
相关推荐
蓝易云几秒前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名1 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我2 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡11 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼13 分钟前
如何简单使用 prompt
前端·aigc
cdbqss118 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农36 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky40 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克1 小时前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦1 小时前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码