6.vue-router
知道路由什么是路由维基百科：路由是通过互连的网络将信息从源地址传输到目的地址的活动。路由是确定数据包从源到目的地的路径。转发将输入端的数据传输到适当的输出端。路由中有一个很重要的概念叫路由表。路由表本质上是一个映射表，它决定了数据包的方向。后端路由阶段后端路由的概念在网站开发的早期，整个HTML页面都是由服务端渲染的。服务端直接将对应渲染好的HTML页面返回给客户端。但是，服务器如何处理网站中的这么多页面？一个页面都有自己对应的网址，即URL。URL会被发送到服务器，服务器通过正则化匹配URL，最后交给一个Controller处理。Controller进行各种处理，最后生成HTML或者数据，返回给前端。这样就完成了一次IO操作。这个操作就是后端路由。后端路由的优点：当我们的页面需要请求不同路径的内容时，交给服务端处理，服务端渲染整个页面，返回页面给客户端。这样的话，渲染后的页面不需要单独加载任何js和css，可以直接被浏览器展示出来，也有利于SEO优化。后端路由的缺点：一种情况是整个页面的模块都是由后端人员编写和维护的。另一种情况是，前端开发人员如果要开发页面，需要通过PHP、Java等语言编写页面代码。而且通常HTML代码、数据和相应的逻辑会混合在一起，编写和维护都是非常糟糕的事情。前端路由阶段前端分离阶段：随着Ajax的出现，出现了前端分离的开发模式。后端只提供返回数据的API，前端通过Ajax获取数据，并可以通过JavaScript将数据渲染到页面中。这样做最大的好处就是前后端职责明确。后端侧重于数据，前端侧重于交互和可视化。而当移动端（iOS/Android）出现时，后台不需要做任何处理，仍然使用之前的一套API就足够了。目前很多网站还是这样开发的。单页富应用阶段：SPA页面：单页复用，只有一个html页面，后面会维护一套路由关系。主要特点是在前后端分离的基础上增加了一层前端路由。即前端维护了一套路由规则。前端路由的核心：改变了URL，但是页面没有整体刷新。当url发生变化时，前端从服务器下载的一组资源中提取相应的js代码进行渲染，整个页面不会刷新。怎么前端路由的规则改变了url但是页面没有整体刷新。URL的hash也是锚点（#），本质上是改变了window.location的href属性。我们可以通过直接赋值location.hash来改变href，但是页面不会刷新。HTML5的history模式history接口是HTML5新增的，它有五种模式可以在不刷新页面的情况下改变URL。history.pushState()history.replaceState()history.go()history.back()等价tohistory.go(-1)history.forward()相当于history.go(1)这三个接口相当于浏览器接口的前进和后退。基本都是用vue-routerVue-router是Vue.js官方的路由插件。它与vue.js深度集成，适用于构建单页应用。vue-router基于路由和组件。路由用于设置访问路径和映射路径和组件。在vue-router的单页面应用中，页面路径的变化就是组件的切换。安装使用步骤1：安装vue-routernpminstallvue-router--save步骤2：在模块化项目中使用（因为是插件，所以可以通过Vue.use()安装路由功能）步骤1:导入路由对象，并调用Vue.use(VueRouter)步骤2：创建路由实例，传入路由映射配置步骤3：在Vue实例中挂载创建的路由实例router-->index,jsimportVuefrom'vue'importVueRouterfrom'vue-router'//1.通过Vue.use(plugin)安装插件Vue.use(VueRouter)//2.创建路由实例constroutes=[];constrouter=newVueRouter({//配置路由和组件routes的应用关系,})//3.将路由对象传递给Vue实例exportdefaultrouter挂载到Vue实例importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'newVue({el:'#app',router,//挂载创建的路由实例render:h=>h(App)})vue-router使用步骤:第一步：创建路由组件第二步：配置路由映射：组件和路径映射第三步：使用路由：via和：这个标签是内置的vue-router中的组件，将被渲染为标签。：该标签会根据组件当前路径动态渲染不同网页的其他内容，比如顶部的标题/导航，或者底部的一些版权信息等都会在与等级相同的地方。切换路由时，切换挂载的组件，其他内容不变。的属性：**to**：用于指定跳转的路径。**tag**：你可以指定在之后渲染什么组件。//将呈现为元素而不是**replace**：替换不会留下历史记录。指定replace时，返回键不能返回上一页。**active-class**：当对应的路由匹配成功后，会自动为当前元素设置一个router-link-active类，默认名称可以通过设置active-class进行修改。您还可以在创建路由器实例时添加linkActiveClass:'active'；突出显示导航菜单或底部标签栏时将使用此类。但是通常不会修改类的属性，直接使用默认的router-link-active就可以了。constrouter=newVueRouter({routes,linkActiveClass:'active'})router-->index.js第二步：配置路由映射constroutes=[{path:'/home',component:Home,},{path:'/about',component:About,},]App.vue首页关于其他问题路由代码跳转页面跳转可能需要执行相应的JavaScript代码，这时候可以使用第二种跳转方式。用户个人资料
注意：不要绕过Vue-router直接使用history方法改变路由。Vue-router默认为每个组件添加$router对象。该对象是新的路由器实例。路由的默认路径重定向是重定向。constroutes=[{path:'',//redirect重定向redirect:'/home'},]Histoty模式默认情况下，用于路径更改的URL的哈希值。如果想使用HTML5的历史模式，可以这样配置：constrouter=newVueRouter({routes,mode:'history',})动态路由this.$router这个对象就是新的路由器实例。this.$route是当前活跃的路线。//
User//{path:'/user/:userId',component:User,}//{{$route.params.id}}
路由的延迟加载在打包构建应用时，Javascript包会变得很大，影响页面加载。如果能将不同路由对应的组件分成不同的代码块，在访问路由时加载相应的组件，效率会更高。路由懒加载的主要作用是将路由对应的组件一一打包成js代码块。只有访问该路由时，才会加载对应的组件。懒加载的方式constHome=()=>import('../components/Home.vue')vue-router嵌套路由实现嵌套路由分两步：创建对应的子组件，在路由中mapping配置对应的子路由。在组件内使用标签。router-->index.jsconstHome=()=>import('../components/Home')constHomeNews=()=>import('../components/HomeNews')constHomeMessage=()=>import('../components/HomeMessage')constroutes=[{path:'',redirect:'/home'},{path:'/home',component:Home,meta:{title:'Home'},children:[{path:'',redirect:'news'},{path:'news',component:HomeNews},{path:'message',component:HomeMessage}]},{path:'/about',component:About,}]constrouter=newVueRouter({routes,mode:'history',})//3.将路由对象传给Vue实例exportdefaultrouterHome.vue新闻新闻vue-router参数传递传递参数主要有两种类型：params和queryparams的类型：配置路由格式：/router/:id传递方式：后面跟path后面形成的路径传递上面对应的值：/router/123，/router/abcquery的类型：配置路由格式：/router，是普通配置传递的方式：对象以query的key为传递方式后形成的路径：/router?id=123,/router?id=abc还有两种使用方式：方法和JavaScript代码方法方法JavaScript代码方法获取参数通过$route对象获取参数.在使用vue-router的应用中，路由对象会被注入到每个组件中，赋值为this.$route，当路由切换时，路由对象会被更新。$route和$router的区别**$router**是一个VueRouter实例，如果想跳转到不同的URL，使用$router.push方法**$route**是当前的router跳转对象，它可以获取name,path,query,params等。vue-routernavigationguardvue-router提供的navigationguard主要用于监控路由的进出。vue-router提供了beforeEach和afterEach钩子函数，会在路由即将发生变化前后触发。导航钩子三个参数解析：钩子一般是回调的意思：要进入的目标的路由对象。from：当前导航即将离开的路由对象。next：调用该方法后，可以进入下一个hook。如果是posthook(afterEach)，则不需要主动调用next()函数//Frontguard(守卫)router.beforeEach((to,from,next)=>{//从from跳转到to.toandfromareroute//如果有路由嵌套，必须加上matched[0]document.title=to.matched[0].meta.titlenext()})//post-hookrouter.afterEach((to,from)=>{})导航守卫分为：全局守卫、路由独占守卫、组件内守卫。keep-alivekeep-alive是Vue的内置组件，可以保持被包含的组件状态，或者避免重新渲染。两个非常重要的属性：include-stringorregularexpression，只有匹配的组件才会被缓存exclude-stringorregularexpression，任何匹配的组件都不会被缓存两个独特的功能：两个钩子函数如果激活（active）和停用（inactive）路由器-view直接包裹在keep-alive中，所有匹配路径的视图组件都会被缓存。我是Home组件
新闻message Keep-alive遇到的问题如果组件a对组件b和c使用keep-alive。b分量中有d和e分量。如果b中没有使用keep-alive，那么D和e组件的状态将不会被保留。但activated和deactivated可以在d和e组件中使用。柏油案
