【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:[]
})
相关推荐
墨菲安全23 分钟前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing24 分钟前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆24 分钟前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding1 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人2 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景2 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘3 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾3 小时前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉3 小时前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html