一、vue-router实现原理
SPA(single page application):单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是:更新视图而不重新请求页面;vue-router在实现单页面前端路由时,提供了两种方式:Hash模式和History模式。
1、hash模式
随着 ajax 的流行,异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的,连页面跳转都是无刷新的,为了实现单页应用,所以就有了前端路由。类似于服务端路由,前端路由实现起来其实也很简单,就是匹配不同的 url 路径,进行解析,然后动态的渲染出区域 html 内容。但是这样存在一个问题,就是 url 每次变化的时候,都会造成页面的刷新。那解决问题的思路便是在改变url的情况下,保证页面的不刷新。在 2014 年之前,大家是通过 hash 来实现路由,url hash 就是类似于:
http://www.xxx.com/#/login
这种 #。后面 hash 值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,也就不会刷新页面。另外每次 hash 值的变化,还会触发hashchange 这个事件,通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作:
function matchAndUpdate () {
// todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
2、history 模式
14年后,因为HTML5标准发布。多了两个 API,pushState 和 replaceState,通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate事件。通过这些就能用另一种方式来实现前端路由了,但原理都是跟 hash 实现相同的。用了HTML5的实现,单页路由的url就不会多出一个#,变得更加美观。但因为没有 # 号,所以当用户刷新页面之类的操作时,浏览器还是会给服务器发送请求。为了避免出现这种情况,所以这个实现需要服务器的支持,需要把所有路由都重定向到根页面。
function matchAndUpdate () {
// todo 匹配路径 做 dom 更新操作
}
window.addEventListener('popstate', matchAndUpdate)
history接口是HTML5新增的,它有5种模式改变URL而不刷新页面
1.pushState
history.pushState({},'','URL')
pushState方法接受三个参数,依次为:state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。最常用的方法:window.history.pushState(null,null,'download?id=1');完整使用:var oState= {title: '下载' };window.history.pushState(oState, '下载', 'download?id=1');特点:pushState()可以创建历史,可以配合popstate事件,可以使用history.go(-1)返回到上一个页面。
2.replaceState
history.replaceState({},'','URL')
传入的参数和pushState一样,但是不会创建历史,不能前进后退。
3.go,back,forward
history.go(n):n前进或后退页数,正数前进,负数后退。
history.back() == history.go(-1)
history.forward() == history.go(1)
默认情况下是使用hash模式,但是我习惯用history模式,可以在创建VueRouter对象的时候改变:mode: 'history'
const routes = []
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
二、vue-router的使用
一般来说,在使用vue-cli(2,3)搭建项目的时候,我都习惯选中vur-router选项,那么就不用自己来创建vue-router。但是如果在搭建的时候忘记了,那么也可以自己手动创建。
1、vue-router的手动搭建:
- npm install vue-router --save 安装vue-router
- 在根目录下创建router文件夹,创建一个index.js文件
//引入Vue和VueRouter import Vue from 'vue' import VueRouter from 'vue-router'
//使用Vue-router插件 Vue.use(VueRouter)
const routes = [] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) //导出router export default router
-
然后挂载到main.js的Vue实例中:
2、使用vue-router
创建路由组件
-
配置组件和路径的映射关系
使用路由
首页
切换路由时,切换的是
router-link属性:
- to:用于指定跳转的路径
- tag:tag可以指定
之后渲染成什么标签,比如:
上面的代码会被渲染成一个li标签,而不是a标签 - replace:replace不会留下history记录,所以指定replace的情况下,后退键返回不能返回到上一个页面中。
- active-class:当
对应的路由匹配成功时,会自动给当前元素设置一个router-link-active的class(在设置高亮显示的时候一般会用这个)
3、编程式导航
有时候,页面的跳转可能需要执行对应的javascript代码,这个时候,我们就要使用代码来控制路由的跳转。
首页
methods: {
divClick(){
this.$router.push('/home')
}
}
4、动态路由
动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果
const User = {
template: 'User'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
现在呢,像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。于是,我们可以更新 User 的模板,输出当前用户的 ID:
const User = {
template: 'User {{ $route.params.id }}'
}
你可以在一个路由中设置多段『路径参数』,对应的值都会设置到 $route.params 中。例如:
提醒一下,当使用路由参数时,例如从/user/foo导航到/user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象
const User = {
template: '...',
watch: {
'$route' (to, from) {
// 对路由变化作出响应...
}
}
}
或者使用 2.2 中引入的 beforeRouteUpdate 守卫:
const User = {
template: '...',
beforeRouteUpdate (to, from, next) {
// react to route changes...
// don't forget to call next()
}
}
vue-router 组件复用问题
组件系统是Vue的一个重要组成部分,它可以将一个复杂的页面抽象分解成许多小型、独立、可复用的组件,通过组合组件来组成应用程序,结合vue-router的路由功能将各个组件映射到相应的路由上,通过路由的变化来告诉Vue要在哪里渲染他们,实现各个组件、各个页面之间的跳转导航。
使用vue-router切换路由时会触发组件树的更新,根据定义的路由渲染一个新的组件树,大致的切换过程是这样的:
停用并移除不需要的组件
验证切换的可行性
复用没有进行更新的组件
启用并激活新的组件
具体路由切换控制流程请参考官方文档:切换控制流水线
那vue-router是怎么判断某一个组件可以复用的呢? 我们看一下下面这条路由配置:
{
path: 'post/:postId',
name: 'post',
component: resolve => require(['./components/Post.vue'],resolve)
}
虽然路由参数已发生更改,但是vue-router会以为你访问的是Post.vue这个组件,由于之前已经渲染过该组件,所以会直接复用之前的组件,并且不会执行组件中的任何操作包括mounted之类的生命周期函数。
所以我们最终看到的还是原来组件的内容。
5、 认识路由的懒加载
官方解释:当打包构建应用时,JavaScript包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
路由懒加载做了什么?
- 路由懒加载的主要作用是将路由对应的组件打包成一个个的js代码块。
- 只有在这个路由被访问的时候,才加载对应的组件。
懒加载的方式:
const Home = () => import('../components/Home.vue')
6、认识嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件,例如
借助 vue-router,使用嵌套路由配置,就可以很简单地表达这种关系
const User = {
template: 'User {{ $route.params.id }}'
}
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User }
]
})
这里的
是最顶层的出口,渲染最高级路由匹配到的组件。同样地,一个被渲染组件同样可以包含自己的嵌套
。例如,在 User 组件的模板添加一个
const User = {
template: `
User {{ $route.params.id }}
`
}
要在嵌套的出口中渲染组件,需要在 VueRouter 的参数中使用 children 配置:
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User,
children: [
{
// 当 /user/:id/profile 匹配成功,
// UserProfile 会被渲染在 User 的 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/:id/posts 匹配成功
// UserPosts 会被渲染在 User 的 中
path: 'posts',
component: UserPosts
}
]
}
]
})
重定向与别名
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
重定向的目标也可以是一个命名的路由:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: { name: 'foo' }}
]
})
甚至是一个方法,动态返回重定向目标:
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
别名:/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
总结:
『重定向』的意思是:当用户访问/a时,URL将会被替换成/b,然后匹配路由为/b。(换药换汤)
别名的意思是:/a的别名是/b,意味着,当用户访问/b时,URL会保持为/b,但是路由匹配则为/a,就像用户访问/a 一样。(换汤不换药)
6、导航守卫
当做Vue-cli项目的时候感觉在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards)。
如何设置一个全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:就是在你router配置的下方注册
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
每个守卫方法接收三个参数:
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 的 to prop 或 router.push 中的选项。
next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例,则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
确保要调用 next 方法,否则钩子就不会被 resolved。
举个例子:
const router = new VueRouter({ ... }) //这是路由配置,我就不多说了
const whiteList = ['/error', '/register/regindex', '/register/userauthent', '/register/submit'] // 路由白名单
vueRouter.beforeEach(function(to,from,next){
console.log("进入守卫");
if (userInfo.user_id>0){
console.log("登录成功");
next(); //记得当所有程序执行完毕后要进行next(),不然是无法继续进行的;
}else{
console.log("登录失败");
getUserInfo.then(res => {
if(res){
if (res.user_id){
if (res.status == 4) {
//账号冻结
next({ path: '/error', replace: true, query: { noGoBack: true } })
}
if (res.status == 3) {
//认证审核中
next({ path: '/register/submit', replace: true, query: { noGoBack: true } })
}
if (res.status != 1 && res.status != 3) {
if (!res.mobile ) {
next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
} else {
//绑定完手机号了
next({ path: '/register/userauthent', replace: true, query: { noGoBack: true } })
}
}
next(); //记得当所有程序执行完毕后要进行next(),不然是无法继续进行的;
}else{
if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单,直接进入
next(); //记得当所有程序执行完毕后要进行next(),不然是无法继续进行的;
}else{
next({ path: '/register/regindex', replace: true, query: { noGoBack: true }})
}
}
}else{
}
}
}).catch(()=>{
//跳转失败页面
next({ path: '/error', replace: true, query: { noGoBack: true }})
})
}
});
export default router
最后和大家说下如果白名单太多或项目更大时,我们需要把白名单换为vue-router路由元信息:
直接在路由配置的时候,给每个路由添加一个自定义的meta对象,在meta对象中可以设置一些状态,来进行一些操作。用它来做登录校验再合适不过了
{
path: '/actile',
name: 'Actile',
component: Actile,
meta: {
login_require: false
},
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
children:[
{
path: 'online',
component: GoodslistOnline
}
]
}
这里我们只需要判断item下面的meta对象中的login_require是不是true,就可以做一些限制了
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})
全局解析守卫(router.beforeResolve)
你可以用router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用
路由独享的守卫
你可以在路由配置上直接定义 beforeEnter 守卫:
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
组件内的守卫
你可以在路由组件内直接定义以下路由导航守卫:
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不!能!获取组件实例 `this`
// 因为当守卫执行前,组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变,但是该组件被复用时调用
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
beforeRouteEnter 守卫 不能 访问 this,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。
不过,你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
完整的导航解析流程
本文有多处参考了:https://www.jianshu.com/p/5dff6811252d
有兴趣的读者可以去看看原文。