Vue-Router中History模式【华为云分享】
【摘要】 vue-router的history模式的服务端支持
示例代码托管在:http://www.github.com/dashnowords/blogs
博客园地址:《大史住在大前端》原创博文目录
history路由
history
模式是指使用HTML5的historyAPI
实现客户端路由的模式,它的典型表现就是去除了hash
模式中url路径中的#
。对于前端路由基本原理还不了解的读者可以看这篇博文【javascript基础修炼(6)——前端路由的基本原理】。在使用Vue-Router
时开启history
模式非常容易,只需要在实例化路由时传入mode:'history'
配置项即可,但缺少服务端支持时,基于historyAPI
的路由无法从url地址栏直接访问指定页面,这个很容易理解,因为url地址栏里输入后回车相当于发送了一次GET
请求,那么不带#
的路由路径就和普通的API
接口是一样的,既然服务端并没有定义这样的接口,那直接访问时出现404页面就很正常了。
官方示例
官方提供了很多处理这种场景的方式,以node.js
版本的处理方案为例:
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})
不难看出,它的处理思路就是所有请求都强制重定向到首页,相当于服务端屏蔽了访问资源不存在的情况,而将路由的工作留给客户端自己去处理,这样启用了history
模式的前端路由在直接定位到子页面时就不会报错了。
Express中间件
express
工程中使用connect-history-api-fallback中间件来处理后端路由的场景,它的使用方式非常简单:
var history = require('connect-history-api-fallback');
var express = require('express');
var app = express();
app.use(history());
源码也只有120行(地址:connect-history-api-fallback中间件源码 ),很容易阅读,基本逻辑是只将满足一些特定条件的请求进行重定向,也就是将路由请求和API
请求区分开,重定向的规则可以自定义,路由请求的判断条件包括:
-
GET
请求 -
headers.accept为
text/html
或*/*
(设置为application/json
或非字符串时会记录错误日志);
核心逻辑就是82-85行的:
rewriteTarget = options.index || '/index.html';
logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
req.url = rewriteTarget;
next();
也就是如果匹配到自定义的重定向规则就使用自定义场景,否则就使用/index.html
作为默认值,然后重写req.url
属性,接着进入下一个中间件执行其他逻辑。
客户端兜底404
当服务端重定向后,如果没有进行SSR
的同构路由定制,对于所有路由请求都会返回index.html
页面,此时如果需要使用404页面,就需要在客户端路由中设定一个优先级最低的兜底路由,由于优先级的缘故,它不会影响其他精确匹配的路由配置:
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '*', component: NotFoundComponent }
]
})
作者:华为云云享专家大史不说话
相关文章
- 手把手写一个Vue-router,无惧面试官的vueRoute题目
- vue 加载页面时触发时间_Vue 刷新页面时会触发事件吗「建议收藏」
- vue入门教程(一)「建议收藏」
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- 细说分片上传与极速秒传(SpringBoot+Vue实现)
- vue动态生成表单_vue element 表单验证
- vue-cli 初始----安装运行Vue项目
- vue.js 渲染函数_Vue.js的不可渲染且可扩展的RTF编辑器[通俗易懂]
- vue源码分析-从new Vue开始
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- VUE组件封装_vue组件内部双向绑定
- vue分页功能实现_vue登录功能
- Vue分页导航_vue分页组件
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- vue-smooth-dndvue-smooth-dnd
- Vue中使用webpack别名的方法详解编程语言
- Vue.js与Oracle数据库——构建完美的前端应用(vueoracle)
- Vue接入Redis拓展应用的可能性(vue调redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)
- Vue实时监测Redis变化(vue监控redis变化)
- Oracle Vue考场助力企业数据库技术突破(oracle vue考场)