解析Vue-router相关干货及工做原理

时间 2019-11-13

标签解析 vue router 相关干货原理繁體版

原文原文链接

本文主要介绍了vue-router相关基础知识及单页面应用的工做原理，写的十分的全面细致，具备必定的参考价值，对此有须要的朋友能够参考学习下。若有不足之处，欢迎批评指正。html

单页面工做原理是经过浏览器URL的#后面的hash变化就会引发页面变化的特性来把页面分红不一样的小模块，而后经过修改hash来让页面展现咱们想让看到的内容。前端

那么为何hash的不一样，为何会影响页面的展现呢？浏览器在这里面作了什么内容。之前#后面的内容通常会作锚点，可是会定位到一个页面的某个位置，这个是怎么作到的呢，和咱们如今的路由有什么不一样。（我能想到一个路由的展现就会把其余路由隐藏，是这样的吗）后面会看一看写一下这个疑惑，如今最重要的是先把基本概念弄熟。vue

当你要把 vue-router 添加进来，咱们须要作的是，将组件(components)映射到路由(routes)，而后告诉 vue-router 在哪里渲染它们起步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 }
]//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
// 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) {
  // 对路由变化做出响应...
 }//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 }
}

有时候，同一个路径能够匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。app

嵌套路由异步

在路由里面嵌套一个路由

//路由里面也会出现 <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
  },//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
  {
   // 当 /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 },
  ]//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 }
 ]
})

编程式导航

声明式：<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
   }
  }
 ]
})//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860

重定向和别名

重定向也是经过 routes 配置来完成，下面例子是从 /a 重定向到 /b：

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

通常首页的时候能够重定向到其余的地方重定向的目标也能够是一个命名的路由：

const router = new VueRouter({
 routes: [
  { path: '/a', redirect: { name: 'foo' }}
 ]//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
})

甚至是一个方法，动态返回重定向目标：

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' }
 ]//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
})

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

HTML5 History 模式

ue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，因而当 URL 改变时，页面不会从新加载。若是不想要很丑的 hash，咱们能够用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须从新加载页面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860

当你使用 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: [//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
  { 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) => {
    // ...//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
   }
  }
 ]
})

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

组件内的守卫

最后，你能够在路由组件内直接定义如下路由导航守卫：

beforeRouteEnter 
beforeRouteUpdate (2.2 新增) 
beforeRouteLeave
 
const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染该组件的对应路由被 confirm 前调用
  // 不！能！获取组件实例 `this`
  // 由于当守卫执行前，组件实例还没被建立
 },//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 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: [
  {//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
   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 字段。下面例子展现在全局导航守卫中检查元字段：

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({//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 确保必定要调用 next()
 }//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
})

数据获取

个人理解就是在哪里获取数据，能够再组件里面，也能够在组件的守卫里面，也就是组件的生命周期里面。有时候，进入某个路由后，须要从服务器获取数据。例如，在渲染用户信息时，你须要从服务器获取用户的数据。咱们能够经过两种方式来实现：导航完成以后获取：先完成导航，而后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。导航完成以前获取：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪一种。

导航完成后获取数据

当你使用这种方式时，咱们会立刻导航和渲染组件，而后在组件的 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>//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 </div>
</template>
export default {
 data () {
  return {
   loading: false,
   post: null,
   error: null
  }
 },
 created () {
  // 组件建立完后获取数据，
  // 此时 data 已经被 observed 了
  this.fetchData()
 },
 watch: {
  // 若是路由有变化，会再次执行该方法
  '$route': 'fetchData'
 },//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 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 {//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
     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))
  })//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
 },
 // 路由改变前，组件就已经渲染完了
 // 逻辑稍稍不一样
 beforeRouteUpdate (to, from, next) {
  this.post = null
  getPost(to.params.id, (err, post) => {
   this.setData(err, post)
   next()//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
  })
 },
 methods: {
  setData (err, post) {
   if (err) {
    this.error = err.toString()
   } else {
    this.post = post
   }//欢迎加入前端全栈开发交流圈一块儿学习交流：864305860
  }
 }
}

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

结语

感谢您的观看，若有不足之处，欢迎批评指正。