vue-router
一、路由概念
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。
router:译为路由器,我们可以理解为一个容器或者说它是一个管理者,举个常见的场景的例子:当用户在页面上点击按钮的时候,这个时候router就会去routes中去查找route,就是说路由器会去路由集合中找对应的路由;
二、路由原理
路由就是用来解析URL实现不同页面之间的跳转
三、路由两种模式
1.hash模式
URL的hash 是以#开头,是基于location.hash来实现的。Location.hash的值就是URL中#后面的内容。当hash改变时,页面不会因此刷新,浏览器也不会请求服务器。
特点:
hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用, hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.xxx.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
2.history模式
history采用HTML5的新特性;且提供了两个新方法:pushState()
,replaceState()可以对浏览器历史记录栈进行修改,以及popState事件的监听到状态变更。
特点:
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 地址后加上/items/id。后端如果缺少对 /items/id 的路由处理,将返回 404 错误。
四、跳转页面
- 编程式导航
我们一般在js种使用this.$router.push({path:"/路径"})来跳转页面 - 组件式导航
<router-link to="/index"> 首页</router-link>
// router-link相当于我们的a标签,to是我们要加载哪个模块种的内容,值为我们路由配置好的路径
五、路由传参
路由传参三种:
分别是query,params,动态路由传参
方式 | 发送 | 接收 |
---|---|---|
query | this.$router.push({path:’/index’,query:{id:id}}) | this.$route.query.id |
params | this.$router.push({name:‘Index’,params:{id:id}}) | this.$route.params.id |
区别:
(1) query可以使用name和path而params只能使用name
(2) 使用params传参刷新后不会保存,而query传参刷新后可以保存
(3) Params在地址栏中不会显示,query会显示
(4) Params可以和动态路由一起使用,query不可以
还有一种动态路由传参
你可以在一个路由中设置多段“路径参数”,对应的值都会设置到 $route.params 中。例如:
模式 | 匹配路径 | $route.params |
---|---|---|
/user/:username | /user/evan | { username: ‘evan’ } |
/user/:username/post/:post_id | /user/evan/post/123 | { username: ‘evan’, post_id: ‘123’ } |
六、路由守卫
路由守卫分三种:全局守卫、组件级守卫、单个路由守卫
1.全局守卫
无论访问哪一个路径,都会触发全局的钩子函数,位置是调用router的方法
2.组件级守卫
跟data和methods同级 放在要守卫的组件里
3.单个路由守卫
单个路由规则守卫 在路由配置中,只有访问到这个路径,才能触发钩子函数
全局的路由守卫有:
1、router.beforeEach 全局前置守卫 进入路由之前
2、router.afterEach 进入路由之后
组件守卫:
1、beforeRouteEnter(){ } 路由跳转进入之前
2、beforeRouteUpdate(){ } (2.2新增) 页面参数更新时触发
3、beforeRouteLeave(){} 离开这个路由触发
单个路由守卫:
beforeEnter(){}
路由守卫钩子函数里面有三个参数分别是to,from,next
- to和from是将要进入和将要离开的路由对象。
- next()这个参数是个函数,且必须调用,否则不能进入路由(页面空白)。
- next() 进入该路由
- next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由,当前的导航被中断,重新开始一个新的导航