路由是什么
通过互联的网络把信息从源地址传输到目的地址的活动;
路由通常根据路由表 —— 一个存储到各个目的地的最佳路径的表 —— 来引导分组转送。
做成硬件之后就是路由器。
hash模式
hash模式代码: 查看代码
点击,在URL里会添加以#开头的字段,可通过window.location.hash获取该字符段,hashchange事件可监听hash值改变。
优点:
完全前端路由,只改变#后面值,无刷新。
优点:
不会出现在http请求中,SEO不友好。(服务器收不到hash)
history模式
history模式代码: https://codesandbox.io/s/oqjvqm6w05
通过window.location.pathname获取/路径字段,
通过history.back()、history.go()、history.forward()完成后退前进等操作,
在HTML5新增了pushState、replaceState,通过
window.history.pushState(stateObject,title,url)
将路由添加到历史堆栈中去,replaceState()修改历史堆栈的记录,可通过history.state查看当前状态记录,但这只是修改了URL的路径,不会加载刷新页面,window.onpopstate对状态监听,但只会在浏览器的前进、后退按钮或者javascript的history.back()、history.go()、history.forward()
方法中触发。优点:
在同源的情况下,实现了前端完全自由,stateObject可以是任何数据类型,URL可以是相对路径也可以是绝对路径。
缺点:
如果后端没有做对应的路由,在刷新时会出现404。(后端将所有路由渲染到同一页面)
memory模式
memory模式代码: https://codesandbox.io/s/936269l69o
该模式就是将路由存在一个对象里,在URL里看不到对应的路径,适用于手机端,但使用很少。
路由导航守卫 - 控制跳转访问
beforeEach函数
router.beforeEach((to, from, next))=>{
// to:去哪里 from:来自哪里 next:放行函数
if(to.pacth === '/login') return next()
}
Vue-Router源码
<router-link to="/xx"></router-link>相当于一个a标签,to相当于href属性。
<router-view></router-view>则是展示的内容。
/*
VueRouter原理
源码
源码扫了一遍,看着确实为难,但了解了大概思路,
首先是封装了RouterView
只接受一个name属性
render函数return一个h(component, data, children),
其实就是创建要渲染的组件,只不过中间对component组件、data对象、children子集做了一些处理。
2.再者是封装了RouterLink
//包含to、tag、activeClass、event等属性
//LinK的render最终return的是h(this.tag, data, this.$slots.default),相当于默认创建了一个a标签,只是对a标签做了如下事件监听
//执行的函数,调用了replace或者push方法
var handler = function (e) {
if (guardEvent(e)) {
if (this$1.replace) {
router.replace(location, noop);
} else {
router.push(location, noop);
}
}
};
//默认监听click事件
var on = {
click: guardEvent };
//对传入事件判断并监听
if (Array.isArray(this.event)) {
this.event.forEach(function (e) {
on[e] = handler;
});
} else {
on[this.event] = handler;
}
// 3.封装VueRouter
var VueRouter = function VueRouter (options) {
if ( options === void 0 ) options = {
};
this.app = null;
this.apps = [];
this