解析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 
]//欢迎加入前端全栈开发交流圈一起学习交流：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
 

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

嵌套路由

在路由里面嵌套一个路由

//路由里面也会出现 <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.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
  
 

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

结语

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

vue-router源码解析router-link组件的用法及原理(代码片段)

该组件支持用户在具有路由功能的应用中(点击)导航,默认渲染成带有正确链接的<a>标签，可以通过tag属性生成别的标签。它本质上是通过在生成的标签上绑定了click事件，然后执行对应的VueRouter实例的push()实现的，对于router-... 查看详情

前端路由原理及vue-router介绍(代码片段)

...nge 事件来监听到URL的变化，从而进行跳转页面。 vue-routerhash实现源码（完整源码访问https://github.com/vuejs/vue-router/blob/dev/src/history/hash.js#L22-L54）：***添加urlhash变化的监听器*/setupListeners()constrouter=this.router/***每当hash变化时... 查看详情

oracleredolog状态及工作原理解析(代码片段)

一码不扫何以扫天下，扫码有福利RedoLog简介Oracle的数据库日志称为redolog，所有数据改变都记录redolog，可以用于修复受损的数据库。大型数据库都采用日志。Redo日志是分组的，一个库至少需要两组，默认是三... 查看详情

springmvc工作原理及源码解析dispatcherservlet实现原理及源码解析

1、DispatcherServlet处理流程从上一篇文章中SpringMVC原理图中我们可以看出：DispatcherServlet在SpringMVC框架中处于核心位置，它负责协调和组织不同组件完成请求处理并返回响应的工作。在分析DispatcherServlet源码之前，我们先来看一下... 查看详情

howjavascriptworks(javascript工作原理)(十四)解析，语法抽象树及最小化解析时间的5条小技巧(代码片段)

...完这篇文章需要15分钟，文章介绍了抽象语法树与js引擎解析这些语法树的过程，提到了懒解析——即转换为AST的过程中不直接进入函数体解析，当这个函数体需要执行的时候才进行相应转换。(因为有的函数体只是声明了，并没... 查看详情

springmvc工作原理及源码解析viewresolver实现原理及源码解析

0、ViewResolver原理介绍根据视图的名称将其解析为View类型的视图，如通过ModelAndView中的视图名称将其解析成View，View是用来渲染页面的，也就是将Model填入模板中，生成html或其他格式的文件。可以设置多个解析策略，如可以根据JS... 查看详情

springmvc工作原理及源码解析handlermapping和handleradapter实现原理及源码解析

1、HandlerMapping实现原理及源码解析在前面讲解SpringMVC工作流程的时候我们说过，前端控制器收到请求后会调⽤处理器映射器（HandlerMapping），处理器映射器根据请求Url找到具体的处理器（Handler），生成处理器对象及处理器拦截器... 查看详情

andfix热修复框架原理及源代码解析-上篇

热补丁介绍及Andfix的使用Andfix热修复框架原理及源代码解析-上篇Andfix热修复框架原理及源代码解析-下篇1.不知道怎样使用的同学，建议看看我上一篇写的介绍热补丁和Andfix的使用，这样你才有一个大概的框架。通过使用Andfix，... 查看详情

干货|动态更新（热更新）机制及技术原理分享

...期工作提到动态更新比较多，今天也借此机会，梳理一下相关的机制原理同大家分享。动态机制及技术原理动态研发模式就是一种基于云端的移动应用开发方法，主要能让开发者快速构建和发布多端的移动应用，实现业务的敏捷... 查看详情

路由及路由器工作原理深入解析3：路由与port

    日志“路由及路由器工作原理深入解析1”http://user.qzone.qq.com/2756567163/blog/1438322342介绍了“为什么要使用路由器”和“TCP/IPV4 协议网络的分段原理”2个问题。日志“路由及路由器工作原理深入解析2”http://use... 查看详情

内存泄漏的定位与排查：heapprofiling原理解析(代码片段)

title:内存泄漏的定位与排查：HeapProfiling原理解析author:[‘张业祥’]date:2021-11-17summary:本文将介绍一些常见的HeapProfiler的实现原理及使用方法，帮助读者更容易地理解TiKV中相关实现，或将这类分析手段更好地运用到自... 查看详情

4.jetpack源码解析—livedata的使用及工作原理(代码片段)

...们将继续分析LiveData组件相关系列文章：1.Jetpack源码解析—看完你就知道Navigation是什么了？2.Jetpack源码解析—Navigation为什么切换Fragment会重绘？3.Jetpack源码解析—用Lifecycles管理生命周期2.基础2.1简介LiveData是一个可观... 查看详情

字节码jvmcpuprofiler技术原理及源码深度解析(代码片段)

1.概述转载：JVMCPUProfiler技术原理及源码深度解析研发人员在遇到线上报警或需要优化系统性能时，常常需要分析程序运行行为和性能瓶颈。Profiling技术是一种在应用运行时收集程序相关信息的动态分析手段，常用的JV... 查看详情

juc并发编程线程池及相关面试题详解(代码片段)

【JUC并发编程】线程池及相关面试题详解参考资料：第十二章线程池原理·深入浅出Java多线程原理两道面试题，深入线程池，连环17问深入理解Java并发编程之线程池、工作原理、复用原理及源码分析硬核干货：4W... 查看详情

springmvc工作原理及源码解析mvc原理介绍与ioc容器整合原理

MVC原理介绍SpringMVC原理图 上图是SpringMVC工作原理图（图片来自网上搜索），根据上图，我们可以得知SpringMVC的工作流程如下：1、用户（客户端，即浏览器）发送请求至前端控制器（DispatcherServlet） 。2、前端控制器收到... 查看详情

hibernatespring和struts工作原理及使用理由

1.读取并解析配置文件2.读取并解析映射信息，创建SessionFactory3.打开Sesssion4.创建事务Transation5.持久化操作6.提交事务7.关闭Session8.关闭SesstionFactory为什么要用：1.对JDBC访问数据库的代码做了封装，大大简化了数据访问层繁琐的重... 查看详情

hibernatespring和struts工作原理及使用理由

1.读取并解析配置文件2.读取并解析映射信息，创建SessionFactory3.打开Sesssion4.创建事务Transation5.持久化操作6.提交事务7.关闭Session8.关闭SesstionFactory为什么要用：1.对JDBC访问数据库的代码做了封装，大大简化了数据访问层繁琐的重... 查看详情

重做日志及归档日志的工作原理解析

开门见山，先来看张图（PS:这张图是我从网上找的）：650)this.width=650;"src="https://s4.51cto.com/wyfs02/M00/08/AF/wKiom1nlvunS7gcRAAJVzjFWZKc589.png"title="6.png"alt="wKiom1nlvunS7gcRAAJVzjFWZKc589.png"/>工作原理：首先lgwr进程将redolog 查看详情