路由其实就是url和文件的映射，在后端控制路由在接收到客户端发来的http请求时，会根据响应的url来找到相应的映射函数，执行得到返回值给客户端。对于简单的静态资源服务，所有url的映射函数是一个文件读取操作；对于动态资源，映射函数可能是个数据库读取操作，也可能是一些数据的处理等等。然后根据读取的数据路由，在服务端使用相应的模板对页面进行渲染后，在返回渲染完毕的页面。,服务端控制的路由来实现服务端渲染，服务端渲染的优缺点在于：,服务端控制路由本质是url和文件读取操作的映射，而前端路由是进行dom元素的显示和隐藏操作，在访问不同路径时显示不同的组件。当前前端路由主要有两种实现方式：hash模式和history模式。,前端路由的优缺点在于：,Vue-router有两种路由模式，分别是hash模式和history模式，在路由配置中默认的是hash模式。,早期的前端路由是基于location.hash来实现的，对此在react-router和vue-router都是默认将hash路由作为路由模式的。hash模式的url默认带有#，location.hash的值就是url的#后面的内容。,在vue-router中，对于http://blog.onechuan.cn/#/login的hash值就是#/login。,特点：,使用： 切换hash路由的方式有两种,对此，可以看到hash路由的实现就是基于hashchange事件进行监听。,原理：,hash模式的主要原理就是onhashchange()事件：,使用onhashchange()的优点：,history模式的url中没有#，看起来也比hash模式更美观，本质是通过传统的路由分发模式，即用户输入一个url时，服务器会接收请求并解析这个URL，然后做出相应的逻辑处理。,当使用history模式时，URL就像这样：https://blog.onechuan.cn/user/id。,特点：,原理：,history模式主要依赖于：history.pushState()和 history.repalceState() 两个api来实现不进行刷新的情况下，操作浏览器的历史记录。,pushState和repalceState不会触发popstate 事件，这时我们需要手动触发页面渲染。,缺点：在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。,两种路由模式的对比,通过监听$route的变化,通过js的window.location.hash读取#值,window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。,使用箭头函数+import动态加载,使用箭头函数+require动态加载,使用webpack的require.ensure技术,这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。,$route 是“路由信息对象”，包括 path、params hash、query、fullPath、matched、name 等路由信息参数；,$router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。,配置路由格式：/router/:id,定义动态路由,路由跳转,参数获取通过 $route.params.userid 获取传递的值。,路由定义,跳转方法,获取参数通过$route.query 获取传递的值。,路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件∶,在一些场景，比如：最常见的登录权限验证，当用户满足条件时，才让其进入导航；否则就取消跳转，并跳到登录页面让其登录。,为此有很多种方法可以植入路由的导航过程：,全局路由钩子,vue-router全局有三个路由钩子;,具体使用∶,单个路由独享钩子,beforeEnter 如果不想全局配置守卫的话，可以为某些路由单独配置守卫，有三个参数∶ to、from、next,组件内钩子,beforeRouteUpdate、beforeRouteEnter、beforeRouteLeave这三个钩子都有三个参数∶to、from、next,注意点，beforeRouteEnter组件内还访问不到this，因为该守卫执行前组件实例还没有被创建，需要传一个回调给 next来访问，例如：,参考文章,https://juejin.cn/post/6964779204462247950,https://mp.weixin.qq.com/s/7TLVBK2A73-1f7yOPMWMHg
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">