SPA

概念

SPA（single page application），单页面应用，就是只有一张WEB页面的应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面的WEB应用程序。

实现

更新视图而不重新请求。

特点

只加载单个html页面
动态更新
更好的用户体验
重前端

vue-router

概念

Vue.js官方的路由管理器，他和Vue.js的核心深度集成，让构建单页面应用易如反掌，本质就是建立起url和页面之间的映射关系。

使用

安装

vue-cli vue add@vue/router
手动 npm i vue-router

使用模型

将组件映射到路由，告诉VueRouter在哪里渲染他们。

创建完router文件，在main.js中引入。

在App页面需要以插槽的方式来显示路由页面。

Home页面显示在router-view容器中。

动态路由

参数获取访问url带参数的页面时，注册路由需要在url上加参数。

在地址栏上需要传入id。

路由的所有参数都存放在this. $route全局对象的params中，获取id的方式为this.$ route.params.id。

如果有多个参数，多个参数存放在query中。

地址栏中的hash值存放在hash中。

所以router对象存放的就是地址栏的信息路由配置优先级是根据注册时的先后顺序决定，当地址为user/zhangsan时，会匹配zhangsan的页面。

将其颠倒，会匹配user页面。

更新url参数当我们要使用参数id去后台获取接口数据时，如果地址栏的参数发生改变，在created中获取的id并不会随之改变，这是由于vue在创建完成页面之后不会重复调用created函数。

此时需要通过watch对route对象进行观察即可。

除了watch的方式，还可以通过BeforeRouteUpdate函数实现，该函数为路由守卫中的其中一个函数，其意义为在路由更新时进行调用，但此方式不适合监视路由参数变化，因为他只是在url改变时触发了函数，但并不更新参数，获取的参数也不是改变后的参数，所以这种需求一般首选watch。

且当使用BeforeRouteUpdat函数时，便不会触发watch中的route。

props传参参数的获取还可以通过props获取，在路由定义时加入props，props的参数可以为布尔值、对象或function，在页面中通过props参数获取url中的参数，其中函数式的好处在于，参数即为route对象，一切的参数都可以通过route对象获取到，并且易于参数扩展，解决了组件和$route间的强耦合。

嵌套路由地址中存在多页面时，需要使用嵌套路由进行访问，嵌套路由通过children定义。

我们在user页面下定义了两个子路由，foo和bar，在user同样需要用router-view来显示嵌套的路由页面。

路由的嵌套建议1-2层即可，否则不理由维护当路由底之前加/，表示访问的是跟地址，当foo前加/，则会直接访问根地址，以/开头的嵌套路径会被当做根路径，这让你充分的使用嵌套组件而无需设置嵌套的路径。

命名视图通过name可以指定router-view的显示多个路由页面，且指定对应的显示内容。

重定向访问一个页面可以通过多种地址访问，比如访问home页面，我们想可以以/home访问的到，也可以通过/jia的地址访问得到，这时候就需要用到路由的重定向。

绝对路径访问
相对路径访问

function方式重定向 function中的参数默认传入一个router对象，我们的重定向信息也可以根据参数取获取，比如通过参数to获取其重定向路径为user。

当我们访问redirect-foo时，参数to赋值user即可。

重定向到user。

带参数的重定向重定向地址中带的参数，会原样传递给重定向指向的地址。

访问不存在的页面的url 交互友好原则，当路径不存在，可以设置默认友好页面，根据路由优先顺序原则。

别名别名使用alias定义，当地址为jia时，访问的还是home页面，但地址栏的地址依然是jia而不是home，别名重定向的本质区别是，重定向是将/A变成/B，而别名是路径保持不变，内部匹配path的实际路径的页面。

别名可以定义多个，以数组的形式。

导航

router-link方式

2 push和replace

当点击浏览器回退按钮时，push方式是回退到上一个页面（home页面)，replace是回退到浏览器的历史记录栈中的上一个页面。

页面回退页面回退调用router对象的back方法，或go方法，go方法通过传参-n的方式实现回退到之前第几个页面。

命名路由通过参数name给路由起名。

在跳转的时候可以直接以对应name选择跳转。

通过这种方式可增加程序的可维护性，因为在页面跳转时我们不需要关心对应路由的path是否会发生改变，只需要关注跳转的路由页面本身，在router-link同样可以使用对象的方式跳转。

导航守卫通过路由进行页面切换的过程中，存在一系列的钩子函数，我们称之为路由守卫，类似于vue的生命周期

全局前置守卫router.beforeEach 该钩子函数参数是一个回调函数，回调函数默认三个参数为to,from,next，其中to和from为路由对象，to存放的是路由跳转到哪个地址信息，from存放的是路由跳转的地址来源信息，而next是一个方法，在beforeEach中处理完逻辑之后必须调用next()方法，路由跳转才能继续。

路由独享守卫beforeEnter 该函数同在路由中定义，参数同样为to,from,next,其意义与router.beforeEach中的参数意义与作用相同
组件内的守卫 beforeRouteEnter，是在路由跳转到该页面时触发，参数为to, from, next，需要调用next()方法完成跳转 beforeRouteUpdate，是在该页面路由信息更新时触发 beforeRouteLeave，是在离开该页面时触发，参数为to, from, next，需要调用next()方法完成跳转