vue路由

Hash模式

vue-router默认使用是Hash模式,Hash模式主要是通过url中的hash值来变化的。Hash(即#)是url的一个锚点,代表的是网页中的一个位置,当hash值变化时,浏览器就滚动到相应的位置,所以不会重新加载页面。在hash值变化的同时url会被浏览器记录下来,这样既可以使用浏览器的后退了。

总结:Hash模式就是通过改变url中#后面的值,实现浏览器渲染指定的组件

History模式

这种模式利用了HTML5 History新增的pushState()和replaceState()方法.除了之前的back,forward,go方法,这两个新方法可以应用在浏览器历史记录的增加替换功能上.使用History模式,通过历史记录修改url,但它不会立即向后端发送请求.注意点:虽然History模式可以丢掉不美观的#,也可以正常的前进后退,但是刷新f5后,此时浏览器就会访问服务器,在没有后台支持的情况下,此时就会得到一个404!官方文档给出的描述是:"不过这种模式要玩好,还需要后台配置支持.因为我们的应用是单个客户端应用,如果后台没有正确的配置,当用户直接访问时,就会返回404.所以呢,你要在服务端增加一个覆盖所有情况的的候选资源;如果url匹配不到任何静态资源,则应该返回同一个index.html页面."\

history.pushState():跳转到页面,并且有记录

history.replaceState():跳转页面,没有记录

history.go():后退几步或者前进几步

history.back():移除当前页面,返回上一个页面history相当于一个栈结构每次pushState就相当一次入栈,每次back就相当一次出栈

总结:History模式就是pushState()方法来对浏览器记录进行修改从而进行修改

router,routes,route的意思

1.router:代表路由实例,如$router 2.routers:指router路由实例的routes API.用来配置多个route路由对象. 3.route:代表自身组件的路由对象,如$route

路由守卫

to: Route: 即将要进入的目标路由对象

from: Route: 当前导航正要离开的路由对象

next: Function: 一定要调用该方法来resolve这个钩子。执行效果依赖next方法的调用参数。

next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是confirmed(确认的)。

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from路由对应的地址。

next('/')或者next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向next传递任意位置对象,且允许设置诸如replace: true、name: 'home'之类的选项以及任何用在router-link的toproprouter.push中的选项。

next(error): (2.4.0+) 如果传入next的参数是一个Error实例,则导航会被终止且该错误会被传递给router.onError()注册过的回调。

作者:鲨鱼训练师

链接:https://juejin.cn/post/6986931172815142943

来源:稀土掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

转载------作者:鲨鱼训练师

链接:https://juejin.cn/post/6986931172815142943

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.mvvm 框架是什么? 定义:M:Model(服务器上的业务逻辑操作) V:View(页面)VM:ViewMo...
  • 参考文章链接https://segmentfault.com/a/1190000011519350https://...
    陈成熟阅读 226评论 0 0
  • 这里说的Vue中的路由是指前端路由,与后端路由有所区别。我们可以使用url来获取服务器的资源,而这种url与资源的...
    一颗脑袋阅读 613评论 0 0
  • 前言:现在 Vue 的路由已经开始大规模应用在单页面应用上了。比较常见的就是路由网址中的 URL 里面的hash(...
    CondorHero阅读 591评论 0 1
  • 路由 注入实例 此后可以在任何组件内通过 this.$router 访问路由器(或通过import导入router...
    李霖弢阅读 429评论 0 0