vue守卫、储存与路由模式

1、守卫

//全局守卫 
router.beforeEach(to,from,next) 
router.afterEach(to,from) 
​
//路由独享守卫 ：守卫路由 
beforeEnter(to,from,next){} 
​
//组件内部守卫 ：
beforeRouteEnter(to,from,next){} //这里使用不到this 
beforeRouteUpdate(to,from,next){} 
beforeRouteLeave(to,from,next){}

2、本地存储

localStorage是永久性存储，页面关闭了也还在 sessionStorage是临时存储，页面关闭了就没了

localStorage.setItem("a",1) //存，不管是什么类型，最终都会变成字符串类型 
localStorage.getItem("a",) //取，如果取到了就是存的那个值，如果没取到就是nu ll
localStorage.removeItem("a") //删除
​
sessionStorage.setItem("a",1) //存，不管是什么类型，最终都会变成字符串类型 
sessionStorage.getItem("a",) //取，如果取到了就是存的那个值，如果没取到就是 null 
sessionStorage.removeItem("a") //删除

3、别名

{
 path:"/search",
 // 别名
 alias:"/s",
 component:search 
}

4、懒加载

const home=()=>Promise.resolve(import("路径信息")) 
const movie=()=>import("路径信息")

5、路由模式

区别： 
hash模式： 
1.采用的是window.onhashchange事件实现。 
2.可以实现前进 后退 刷新。 
3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。
它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中， 对后端完全没有影响，因此改变hash不会重新加载页面 

history模式： 
1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replace State() 方法。 
2.可以前进、后退，但是刷新有可能会出现404的报错 
3.前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/boo k/id 。 
  如果后端缺少对/book/id 的路由处理，将返回404错误。 
  不过这种模式要玩好，还需要后台配置支持。
  因为我们的应用是个单页客户端应用， 
  如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 
  就会返回 404，这就不好看了。 
  所以呢，你要在服务端增加一个覆盖所有情况的候选资源：
  如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面
  这个页面就是你 app 依赖的页面。