vue中的historyApiFallback详解

本篇博客主要是详细总结一下vue中的historyApiFallback的作用。
当我们在浏览器中输入一个网址(比如说是:http://www.edit.com),此时会经过dns解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(html,css,js)。如果我们在前端设置了重定向,此时页面会进行跳转到http://www.edit.com/home,在前端会进行匹配对应的组件然后将其渲染到页面上。此时如果我们刷新页面的话,浏览器会发送新的请求http://www.edit.com/home,如果后端服务器没有/home对应的接口,此时会返回404,但是一般我们配置nginx进行代理,此时在Nginx中进行相关配置,就可以解决该问题。如下图所示为nginx中进行配置。
在这里插入图片描述
该配置的意思就是请求路径对应的接口时,此时就返回首页数据,此时当前端拿到该数据时,此时根据前端路由来匹配相应的组件即可。
本地服务器
如果我们在本地开启服务器,此时当我们进行刷新时,浏览器会拿着该地址localhost:8000/home向本地服务器发起请求,但是本地不存在/home的文件夹,所以会返回404。如下图所示。

  • 3
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 的 render 函数是 Vue 组件渲染的核心,通过 render 函数可以实现更加灵活的组件编写方式。下面是关于 Vue render 函数的详细介绍: 1. 概念定义: Vue 的 render 函数是一个纯 JavaScript 函数,它接收一个 createElement 函数作为参数,用于生成虚拟 DOM,最终将组件渲染成 HTML。在 Vue 组件,可以使用 render 函数来代替 template,这样可以更加灵活地渲染组件。 2. createElement 函数: createElement 函数是 Vue 的一个工厂函数,用于快速创建虚拟 DOM 元素。createElement 函数接收三个参数,第一个参数是标签名或组件,第二个参数是属性对象,第三个参数是子节点。 使用 createElement 函数可以快速创建虚拟 DOM 元素,例如: ```javascript // 创建一个 div 元素 createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) ``` 3. Vue 组件的 render 函数: Vue 组件的 render 函数接收一个 createElement 函数作为参数,通过该函数创建虚拟 DOM 元素。在 render 函数,通过编写 JavaScript 代码来生成 DOM 元素,可以使用条件判断、循环语句等,从而实现更加灵活的组件渲染。 例如,下面是一个简单的 render 函数: ```javascript render (createElement) { return createElement('div', { class: 'wrapper' }, [ createElement('h1', {}, 'Hello Vue') ]) } ``` 4. render 函数与 template 的对比: 相对于 template,render 函数的优点在于:可以使用 JavaScript 代码生成 DOM 元素,可以进行条件判断、循环语句等;可以实现更加灵活的组件开发;可以更好地控制组件的渲染流程。 相对于 template,render 函数的缺点在于:需要熟悉 JavaScript 语法和 createElement 函数;在实现复杂组件时,需要编写更多的代码。 5. render 函数和 JSX: JSX 是 Facebook 出品的一种语法扩展,可以在 JavaScript 编写类似 HTML 的语言。与 render 函数类似,JSX 也是将组件编写成 JavaScript 代码的方式。 Vue 也支持 JSX 语法,Vue 的 JSX 实现是通过 Babel 插件实现的。使用 JSX 可以更加直观地编写组件,但需要熟悉 JSX 语法和相关工具的使用。 6. 总结: render 函数是 Vue 组件的核心,它通过 createElement 函数创建虚拟 DOM 元素,最终将组件渲染成 HTML。相对于 template,render 函数可以实现更加灵活的组件开发,但需要熟悉 JavaScript 语法和 createElement 函数。同时,Vue 也支持 JSX 语法,可以更加直观地编写组件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值