Vue路由
一、对前端路由的理解
路由:路由是url到函数的映射,可以根据不同的url地址展示不同的内容或页面。
- 服务器端路由(后端路由)
- 对于服务器来说,当接收到客户端发来的HTTP请求,会根据请求的URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。
- 客户端路由(前端路由)
- 早期的路由都是后端实现的,直接根据 url 来 reload 页面,页面变得越来越复杂服务器端压力变大,随着 ajax 的出现,页面实现非 reload 就能刷新数据,更新页面内容,使内容的切换更加流畅,可以通过记录 url 来记录 ajax 的变化,从而实现前端路由。对于客户端(通常为浏览器)来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样,当访问不同的路径的时候,会显示不同的页面组件。
- 前端路由可以帮助我们在仅有一个页面的情况下,“记住”用户当前走到了哪一步——为 SPA 中的各个视图匹配一个唯一标识。这意味着用户前进、后退触发的新内容,都会映射到不同的 URL 上去。此时即便他刷新页面,因为当前的 URL 可以标识出他所处的位置,因此内容也不会丢失。
二、Vue-router跳转和location.href有什么区别
- 使用 location.href= ‘/url’ 来跳转,简单方便,但是刷新了页面
- 引进 router ,然后使用 router.push( ‘/url’ ) 来跳转,无刷新页面,静态跳转。使用了 diff 算法,实现了按需加载,减少了 dom 的消耗。使用 router 跳转底层是用history.pushState()
三、$route 和$router 的区别
-
$route 是“路由信息对象”,包括 name,path,params,query,meta,fullPath,hash、matched等路由信息参数
-
$router 是“路由实例”对象,包括了路由的跳转方法,钩子函数等,可以使用$router.push()、$router.replace()、$router.go()等
四、params和query的区别
- 用法不同
- params要用name来引入;接收参数this.$route.params.name;在路由信息配置时路径path需要占位
- query可以用name和path来引入;接收参数this.$route.query.name;在路由信息配置时路径path不需要占位
- url地址显示不同
- params则类似于post,在浏览器地址栏中不显示参数
- query更加类似于ajax中get传参,在浏览器地址栏中显示参数
- 刷新不同
- params刷新会丢失 params里面的数据(可考虑采取本地存储解决此问题)
- query刷新不会丢失query里面的数据
五、 路由的hash和history模式的区别
1.hash路由模式(默认)
- 概述
- hash模式是开发中默认的模式,它的URL带着一个#,例如:http://www.abc.com/#/vue,它的hash值就是#/vue。
- 特点
- hash值会出现在URL里面,但是不会出现在HTTP请求中,对后端完全没有影响。所以改变hash值,不会重新加载页面。这种模式的浏览器支持度很好,低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由,已经成为SPA(单页面应用)的标配。
- 原理
- hash模式的主要原理就是onhashchange()事件
- 使用onhashchange()事件的好处就是,在页面的hash值发生变化时,无需向后端发起请求,window就可以监听事件的改变,并按规则加载相应的代码。除此之外,hash值变化对应的URL都会被浏览器记录下来,这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器,但是页面的hash值和对应的URL关联起来了。
2.history路由模式
-
概述
- history模式的URL中没有#,它使用的是传统的路由分发模式,即用户在输入一个URL时,服务器会接收这个请求,并解析这个URL,然后做出相应的逻辑处理。
-
特点
- 当使用history模式时,URL就像这样:http://abc.com/user/id。相比hash模式更加好看。但是,history模式需要后台配置支持。如果后台没有正确配置,访问时会返回404。
-
API
- history api可以分为两大部分,切换历史状态和修改历史状态:
- 切换历史状态
- 包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,这两个方法应用于浏览器的历史记录栈,提供了对历史记录进行修改的功能。只是当他们进行修改时,虽然修改了url,但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果,就需要前端用上这两个API。
- 修改历史状态
- 包括forward()、back()、go()三个方法,对应浏览器的前进,后退,跳转操作。
-
切换为history模式
const router = new VueRouter({ mode: 'history', routes: [...] })
3.调用 history.pushState() 与直接修改 hash对比
- pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL;而 hash 只可修改 # 后面的部分,因此只能设置与当前 URL 同文档的 URL
- pushState() 设置的新 URL 可以与当前 URL 一模一样,这样也会把记录添加到栈中;而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中
- pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中;而 hash 只可添加短字符串
- pushState() 可额外设置 title 属性供后续使用
- hash模式下,仅hash符号之前的url会被包含在请求中,后端如果没有做到对路由的全覆盖,也不会返回404错误;history模式下,前端的url必须和实际向后端发起请求的url一致,如果没有对用的路由处理,将返回404错误
六、如何获取页面的hash变化
-
window.location.hash读取#值
- window.location.hash 的值可读可写,读取来判断状态是否改变,写入时可以在不重载网页的前提下,添加一条历史访问记录。
-
监听$route的变化
// 监听,当路由发生变化的时候执行 watch: { $route: { handler: function (val, oldVal) { console.log(val) }, // 深度观察监听 deep: true } }
七、如何定义动态路由?如何获取传过来的动态参数?
- params传参
- 路由格式
- 配置路由格式:/router/:id
- 传递的方式:在path后面跟上对应的值
- 传递后形成的路径:/router/123
- 接收参数
- 通过 $route.params.userid 获取传递的值
- 路由格式
- query传参
- 路由格式
- 配置路由格式:/router?key1=value1&key2=value2
- 传递的方式:对象中使用query的key作为传递方式
- 传递后形成的路径:/route?id=123&uname=cara
- 接收参数
- 通过$route.query.userid获取传递的值
- 路由格式
八、Vue-router 的懒加载如何实现
-
非懒加载
import List from '@/components/list.vue' const router = new VueRouter({ routes: [ { path: '/list', component: List } ] })
-
懒加载
-
使用箭头函数+import动态加载
const router = new VueRouter({ routes: [ { path: '/list', component: () => import('@/components/list.vue') } ] })
-
使用箭头函数+require动态加载
-
webpack
-
九、Vue-router 导航守卫
- 全局守卫(前置/后置):beforeEach、beforeResolve、afterEach
- 路由独享的守卫:beforeEnter
- 组件内的守卫:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave