$route对象：$route对象表示当前的路由信息，包含了当前URL解析得到的信息。包含当前的路径，参数，query对象等。1.$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如"/foo/bar"。2.$route.params一个key/value对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。3.$route.query一个key/value对象，表示URL查询参数。例如，对于路径/foo?user=1，则有$route.query.user==1，如果没有查询参数，则是个空对象。4.$route.hash当前路由的hash值(不带#)，如果没有hash值，则为空字符串。锚点*5.$route.fullPath完成解析后的URL，包含查询参数和hash的完整路径。6.$route.matched数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。7.$route.name当前路径名字8.$route.meta路由元信息$router对象：$router对象是全局路由的实例，是router构造方法的实例。实例方法：1、push1.字符串this.$router.push('home')2.对象this.$router.push({path:'home'})3.命名的路由this.$router.push({name:'user',params:{userId:123}})4.带查询参数，变成/register?plan=123this.$router.push({path:'register',query:{plan:'123'}})push方法其实和<router-link:to="...">是等同的。注意：push方法的跳转会向history栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。2、go页面路由跳转前进或者后退this.$router.go(-1)//后退3、replacepush方法会向history栈添加一个新的记录，而replace方法是替换当前的页面，不会向history栈添加一个新的记录

hash模式location.hash的值实际就是URL中#后面的东西它的特点在于：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。可以为hash的改变添加监听事件window.addEventListener("hashchange",funcRef,false);每一次改变hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用hash的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了特点：兼容性好但是不美观history模式利用了HTML5HistoryInterface中新增的pushState()和replaceState()方法。这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前URL改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。特点：虽然美观，但是刷新会出现404需要后端进行配置(一般是将页面配置重定向到首页路由)总结hash模式是开发中默认的模式，如果想要切换到history模式，就要进行以下配置（后端也要进行配置）：constrouter=newVueRouter({mode:'history',routes:[...]})

路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候，才会加载对应组件的代码块。//非路由懒加载importVuefrom'vue'importRouterfrom'vue-router'importHomefrom'@/components/Home'importLoginfrom'@/components/Login'importNewfrom'@/components/New'importListfrom'@/components/List'......routes:[{path:'/Login',name:'Login',component:Login},{path:'/',name:'Home',component:Home},...]vue实现路由懒加载的三种方式：Vue异步组件ES6的import()webpack的require.ensure()

路由的理解什么是路由1.一个路由就是一组映射关系（key---value）2.key为路径，value可能是function或Componentrouter和routerouter：中文直译是“路由器的意思”，简单来说就是路由（route）的管理者route：指的就是单个路由或者某一个路由路由的分类后端路由理解：value是function，用于处理客户端提交的请求工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据前端路由理解：value是component，用于展示页面内容工作过程：当浏览器的路径改变时，对应的组件就会显示路由的安装路由的安装也是要要借助Vue脚手架，通过npm命令进行安装值得注意的是：一般安装vue-router会安装最新版本，而Vue-router最新版本为4，但Vue-router4只能在Vue3中使用，所以Vue2只能用Vue-router3命令如下：npmivue-router@3

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。根据这个原理，我们使用HTML5的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。注意：data-xxx中的xxx可以自定义，这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时，获取图片的真实地址并赋值给图片即可。使用原生JavaScript实现懒加载：知识点：（1）window.innerHeight是浏览器可视区的高度（2）document.body.scrollTop||document.documentElement.scrollTop是浏览器滚动过的距离（3）imgs.offsetTop是元素顶部距离文档顶部的高度（包括滚动条的距离）（4）图片加载条件：img.offsetTop<window.innerHeight+document.body.scrollTop;图示：<divclass="container"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"><imgsrc="loading.gif"data-src="pic.png"></div><script>varimgs=document.querySelectorAll('img');functionlozyLoad(){varscrollTop=document.body.scrollTop||document.documentElement.scrollTop;varwinHeight=window.innerHeight;for(vari=0;i<imgs.length;i++){if(imgs[i].offsetTop<scrollTop+winHeight){imgs[i].src=imgs[i].getAttribute('data-src');}}}window.onscroll=lozyLoad();</script>复制代码

减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量，同时也减小了浏览器的负担。提升用户体验:如果同时加载较多图片，可能需要等待的时间较长，这样影响了用户体验，而使用懒加载就能大大的提高用户体验。防止加载过多图片而影响其他资源文件的加载：会影响网站应用的正常使用。