vue-router相关基础知识及工作原理


Posted in Javascript onMarch 16, 2018

 前言

今天面试被问到 vue的动态路由,我竟然没有回答上来,感觉不是什么难得问题。好久没有看vue-router的文档,很多用的东西和概念没有对上。回来一看什么是动态路由就傻眼了。看来有必要把vue -router相关知识总结一下,好丢人的感觉。

单页面应用的工作原理

我理解的单页面工作原理是通过浏览器URL的#后面的hash变化就会引起页面变化的特性来把页面分成不同的小模块,然后通过修改hash来让页面展示我们想让看到的内容。

那么为什么hash的不同,为什么会影响页面的展示呢?浏览器在这里面做了什么内容。以前#后面的内容一般会做锚点,但是会定位到一个页面的某个位置,这个是怎么做到的呢,和我们现在的路由有什么不同。(我能想到一个路由的展示就会把其他路由隐藏,是这样的吗)后面会看一看写一下这个疑惑,现在最重要的是先把基本概念弄熟。

正文

当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们

起步

//*** router-link 告诉浏览器去哪个路由
//*** router-view 告诉路由在哪里展示内容
<div id="app">
 <h1>Hello App!</h1>
 <p>
 <!-- 使用 router-link 组件来导航. -->
 <!-- 通过传入 `to` 属性指定链接. -->
 <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
 <router-link to="/foo">Go to Foo</router-link>
 <router-link to="/bar">Go to Bar</router-link>
 </p>
 <!-- 路由出口 -->
 <!-- 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>
</div>
// 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
 { path: '/foo', component: Foo },
 { path: '/bar', component: Bar }
]
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
 routes // (缩写)相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({
 router
}).$mount('#app')
// 现在,应用已经启动了!

动态路由匹配

相当于同一个组件,因为参数不同展示不同的组件内容,其实就是在 vue-router 的路由路径中使用『动态路径参数』

const router = new VueRouter({
 routes: [
 // 动态路径参数 以冒号开头
 { path: '/user/:id', component: User }
 ]
})

那么我们进入uesr/001 user/002 其实是进入的同一个路由,可以根据参数的不同在内容页展示不同的内容。一般适用场景:列表,权限控制

定义的时候用: 表示是动态路由

使用 {{ $route.params.id }} 来拿到本路由里面参数的内容

当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch(监测变化) $route 对象

const User = {
 template: '...',
 watch: {
 '$route' (to, from) {
  // 对路由变化作出响应...
 }
 }
}

有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。

嵌套路由

在路由里面嵌套一个路由

//路由里面也会出现 <router-view> 这是嵌套路由展示内容的地方
const User = {
 template: `
 <div class="user">
  <h2>User {{ $route.params.id }}</h2>
  <router-view></router-view>
 </div>
 `
}
//定义路由的时候在 加children 子路由属性
const router = new VueRouter({
 routes: [
 { path: '/user/:id', component: User,
  children: [
  {
   // 当 /user/:id/profile 匹配成功,
   // UserProfile 会被渲染在 User 的 <router-view> 中
   path: 'profile',
   component: UserProfile
  },
  {
   // 当 /user/:id/posts 匹配成功
   // UserPosts 会被渲染在 User 的 <router-view> 中
   path: 'posts',
   component: UserPosts
  }
  ]
 }
 ]
})

设置空路由,在没有指定路由的时候就会展示空路由内容

const router = new VueRouter({
 routes: [
 {
  path: '/user/:id', component: User,
  children: [
  // 当 /user/:id 匹配成功,
  // UserHome 会被渲染在 User 的 <router-view> 中
  { path: '', component: UserHome },
  ]
 }
 ]
})

编程式导航

声明式:<router-link :to="...">
编程式:router.push(...)

可以想象编程式 push 可以理解为向浏览器历史里面push一个新的hash,导致路由发生变化

router.replace()  修改路由但是不存在历史里面
router.go(n)      有点像JS的window.history.go(n)

命名路由 就是给每一个路由定义一个名字。

命名视图

有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。

<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置(带上 s):

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
    default: Foo,
    a: Bar,
    b: Baz
   }
  }
 ]
})

重定向和别名

重定向也是通过 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时,URL 将会被替换成 /b,然后匹配路由为 /b,那么『别名』又是什么呢?

/a 的别名是 /b,意味着,当用户访问 /b 时,URL 会保持为 /b,但是路由匹配则为 /a,就像用户访问 /a 一样。

上面对应的路由配置为:

const router = new VueRouter({
 routes: [
  { path: '/a', component: A, alias: '/b' }
 ]
})

『别名』的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。

HTML5 History 模式

ue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id,也好看!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就不好看了。

所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

给个警告,因为这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '*', component: NotFoundComponent }
 ]
})

或者,如果你使用 Node.js 服务器,你可以用服务端路由匹配到来的 URL,并在没有匹配到路由的时候返回 404,以实现回退。

导航守卫

我的理解 就是组件或者全局级别的 组件的钩子函数

正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

全局守卫

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

每个守卫方法接收三个参数:

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。

全局后置钩子

你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next 函数也不会改变导航本身:

router.afterEach((to, from) => {
 // ...
})

路由独享的守卫

你可以在路由配置上直接定义 beforeEnter 守卫:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   beforeEnter: (to, from, next) => {
    // ...
   }
  }
 ]
})

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

最后,你可以在路由组件内直接定义以下路由导航守卫:

beforeRouteEnter 
beforeRouteUpdate (2.2 新增) 
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,因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

路由元信息

我的理解就是 他可以把路由的父路径都列举出来,完成一些任务,比如登录,user 组件需要登录,那么user下面的foo组件也需要,那么可以通过这个属性 来检测这个路由线上 的一些状态。

定义路由的时候可以配置 meta 字段:

const router = new VueRouter({
 routes: [
  {
   path: '/foo',
   component: Foo,
   children: [
    {
     path: 'bar',
     component: Bar,
     // a meta field
     meta: { requiresAuth: true }
    }
   ]
  }
 ]
})

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的 $route.matched 数组。因此,我们需要遍历 $route.matched 来检查路由记录中的 meta 字段。

下面例子展示在全局导航守卫中检查元字段:

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  // this route requires auth, check if logged in
  // if not, redirect to login page.
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保一定要调用 next()
 }
})

数据获取

我的理解就是在哪里获取数据,可以再组件里面,也可以在组件的守卫里面,也就是组件的生命周期里面。

有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现:

导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。

从技术角度讲,两种方式都不错 —— 就看你想要的用户体验是哪种。

导航完成后获取数据

当你使用这种方式时,我们会马上导航和渲染组件,然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态,还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件,需要基于 $route.params.id 获取文章数据:

<template>
 <div class="post">
  <div class="loading" v-if="loading">
   Loading...
  </div>

  <div v-if="error" class="error">
   {{ error }}
  </div>

  <div v-if="post" class="content">
   <h2>{{ post.title }}</h2>
   <p>{{ post.body }}</p>
  </div>
 </div>
</template>
export default {
 data () {
  return {
   loading: false,
   post: null,
   error: null
  }
 },
 created () {
  // 组件创建完后获取数据,
  // 此时 data 已经被 observed 了
  this.fetchData()
 },
 watch: {
  // 如果路由有变化,会再次执行该方法
  '$route': 'fetchData'
 },
 methods: {
  fetchData () {
   this.error = this.post = null
   this.loading = true
   // replace getPost with your data fetching util / API wrapper
   getPost(this.$route.params.id, (err, post) => {
    this.loading = false
    if (err) {
     this.error = err.toString()
    } else {
     this.post = post
    }
   })
  }
 }
}

在导航完成前获取数据

通过这种方式,我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 守卫中获取数据,当数据获取成功后只调用 next 方法。

export default {
 data () {
  return {
   post: null,
   error: null
  }
 },
 beforeRouteEnter (to, from, next) {
  getPost(to.params.id, (err, post) => {
   next(vm => vm.setData(err, post))
  })
 },
 // 路由改变前,组件就已经渲染完了
 // 逻辑稍稍不同
 beforeRouteUpdate (to, from, next) {
  this.post = null
  getPost(to.params.id, (err, post) => {
   this.setData(err, post)
   next()
  })
 },
 methods: {
  setData (err, post) {
   if (err) {
    this.error = err.toString()
   } else {
    this.post = post
   }
  }
 }
}

在为后面的视图获取数据时,用户会停留在当前的界面,因此建议在数据获取期间,显示一些进度条或者别的指示。如果数据获取失败,同样有必要展示一些全局的错误提醒。

总结

以上所述是小编给大家介绍的vue-router相关基础知识及工作原理,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript replace方法与正则表达式
Feb 19 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JavaScript中property和attribute的区别详细介绍
Mar 03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
javascript三种代码注释方法
Jun 02 Javascript
BootStrap中Table分页插件使用详解
Oct 09 Javascript
js实现数组去重方法及效率?Ρ? target=
Feb 14 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
vue中element 上传功能的实现思路
Jul 06 Javascript
详解Vue项目中实现锚点定位
Apr 24 Javascript
axios post提交formdata的实例
Mar 16 #Javascript
在vue组件中使用axios的方法
Mar 16 #Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 #Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 #Javascript
vue axios 表单提交上传图片的实例
Mar 16 #Javascript
vue中实现图片和文件上传的示例代码
Mar 16 #Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
Mar 16 #Javascript
You might like
PHP CURL 多线程操作代码实例
2015/05/13 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
为你总结一些php信息函数
2015/10/21 PHP
Zend Framework生成验证码并实现验证码验证功能(附demo源码下载)
2016/03/22 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP实现常用排序算法的方法
2020/02/05 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
jQuery LigerUI 使用教程表格篇(1)
2012/01/18 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
2013/11/26 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
nodejs如何获取时间戳与时间差
2016/08/03 NodeJs
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
理解javascript中的闭包
2017/01/11 Javascript
JS检测是否可以访问公网服务器功能代码
2017/06/19 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
[02:25]专访DOTA2负责人Erik 国际邀请赛暂不会离开西雅
2014/07/21 DOTA
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
[01:20]PWL S2开团时刻第三期——团战可以输 蝙蝠必须死
2020/11/26 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
HTML5 Canvas中使用用路径描画圆弧
2015/01/01 HTML / CSS
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
医学生个人求职信范文
2014/02/07 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
详解MySQL的半同步
2021/04/22 MySQL
python ansible自动化运维工具执行流程
2021/06/24 Python
Spring实现内置监听器
2021/07/09 Java/Android