<p>本篇文章带大家详细的讲解了vue中的路由，守卫这两个知识点，小伙伴们可以根据文章内容进行相关的学习</p> 讯享网
vue的一个插件库，专门用来实现对的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面，只会做页面的局部更新。数据需要通过ajax请求获取。
- 一个路由就是一组映射关系(key ：value)
- key 为路径, value可能是function或componente
value 杲function,用于处理客户端提交的请求。工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。【相关推荐：vuejs视频教程、web前端开发】
value是component,用于展示页面内容。工作过程: 当浏览器的路径改变时,对应的组件就会显示。
1.安装vue-router
2.应用插件
3.router配置项
})
4.使用router-link实现切换（注：router-link经过浏览器后就会变成a标签哦）
5.使用router-view实现组件的呈现（类似于插槽）
注：1.路由组件通常存放在pages文件夹，所以不要往components文件夹里面放了
2.通过切换，“隐藏” 了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
4.整个应用只有一个router, 可以通过组件的$router属性获取到。
在配置路由规则的以及路由里面进行配置下一级路由使用children:[ { } ]这种形式
有两种方式，第一种就是直接再路径里面写query参数，第二种就是params传参
（简化代码）
立即学习“前端免费学习笔记（深入）”；
再to的时候就不用写一大堆路径了
1. 配置路由声明接受params参数
2.传递参数
3，接受参数
一共有三种配置方法，分别是，，目的是让路由组件更方便的接受到参数
1.作用:控制路由跳转时操作浏览器历史记录的模式
2.浏览器的历史记录有两种写入方式:分别为和，push 是追加历史记录，replace 是替换当前记录。路由跳转时候默认为push，所以为push的时候可以进行后退前进操作，而replace直接就是替换掉之前的那个地址所以在replace的里面智慧存在一个地址，也就是当前所呈现的那个地址，就好比做核算，push是排队的人，replace是做核酸的医务人员
3.如何开启模式:
1.作用:不借助
1.作用:让不展示的路由组件保持挂载,不被销毁。
2.具体实现方法
两个新的生命周期钩子
1.作用:路由组件所独有的两个钩子，用于捕获路由组件的激活状态分别是 路由组件被激活时触发。 路由组件失活时触发。
:对路由进行权限控制
分类:、、
专门服务于一个路由的守卫
在进入/离开组件时被激活
对于一个url来说#其后面的内容就是hash值。
就是这个#后面的
- hash值不会带给服务器。
- hash模式
1.地址中永远带着#号
2.若以后将地址通过第三方手机app分享，若app校验严格, 则地址会被标记为不合法。
3.兼容性较好。
3.history模式
1.地址干净，美观。
2.兼容性和hash模式相比略差。
3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
4.切换history模式
在route文件夹下面的index文件里添加 mode: 'history'这句代码即可（默认的是hash模式）
（学习视频分享：vuejs入门教程、编程基础视频）
以上就是一文浅析Vue中的路由和多种守卫的详细内容，更多请关注php中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/183182.html