ES6 课程概述⑥

渲染函数

基础

当我们需要使用 JavaScript 的编程能力时，可以利用渲染函数。渲染函数比模板更接近于编译器。

例如，我们想要生成一些标题：

<h1>Hello world!</h1>

如果，我们按照之前的方式，那么模板内将会十分冗余。如果此时利用渲染函数，那么代码写起来将会简洁很多。

props: {
  level: {
    type: Number,
    required: true
  }
},
render: function (createElement) {
  return createElement(
    'h' + this.level,   // 标签名称
    this.$slots.default // 子节点数组
  )
},

节点、树、以及虚拟 DOM

在深入渲染函数之前，先来了解一些浏览器的工作原理。例如，下面这段 HTML：

<div>
  <h1>My title</h1>
  Some text content
  <!-- TODO: Add tagline -->
</div>

当浏览器读到这些代码时，它会建立一个DOM 节点树 来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。
以上 HTML 对应的 DOM 节点树如下图所示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-49S5C688-1674023267969)(https://cn.vuejs.org/images/dom-tree.png)]

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点。

高效地更新所有这些节点是比较困难的，不过幸运的是，我们不需要手动完成这个工作。只需要告诉 Vue 希望页面上的 HTML 是什么，例如在模板中：

<h1>{{ blogTitle }}</h1>

或者是在一个渲染函数中：

render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

虚拟 DOM

Vue 通过建立一个虚拟 DOM来追踪自己要如何改变真实 DOM。例如：

return createElement("h1", this.blogTitle);

createElement 会返回什么呢？
它不会返回一个实际的 DOM 元素。更准确的名字可能是：createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括其子节点的描述信息。我们把这样的节点描述为“虚拟节点（virtual node）”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

createElement 参数

createElement 接收的参数：

createElement(
  标签名(必需),
  与模板中属性对应的数据对象(可选),
  子级虚拟节点(可选)
);

深入数据对象

{
  // 与 `v-bind:class` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组
  class: {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px',
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo',
  },
  // 组件 prop
  props: {
    myProp: 'bar',
  },
  // DOM属性
  domProps: {
    innerHTML: 'baz',
  },
  // 事件监听器，不支持如“v-on:keyup.enter”这样的修饰器
  on: {
    click: this.onClick
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用 vm.$emit 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，无法对 `binding` 中的 `oldValue`赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 其它特殊顶层属性
  key: 'myKey',
  ref: 'myRef',
  // 如果在渲染函数中给多个元素都应用了相同的 ref 名，那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
  // 作用域插槽，格式为：{ name: props => VNode | Array<VNode> }
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
}

使用 JavaScript 代替模板功能

v-if 和 v-for

只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。比如，在模板中使用的 v-if 和 v-for：

<ul v-if="items.length">
  <li v-for="item in items">{{ item }}</li>
</ul>
<p v-else>No items found.</p>

这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写：

props: ['items'],
render (createElement) {
  if(items.length) {
    return createElement('ul', this.items.map(item => createElement('li', item)))
  } else {
    return createElement('p', 'No items found');
  }
}

v-model

渲染函数中没有与 v-model 的直接对应—必须自己实现相应的逻辑：

<input v-model="value" />

data () {
  return {
    value: 'ceshi',
  }
},
render (createElement) {
  const self = this;
  return createElement('input', {
    attrs: {
      value: self.value
    },
    on: {
      input (e) {
        self.value = e.target.value;
      }
    },
  });
},

事件&按键修饰符

对于 .passive、.capture 和 .once 这些事件修饰符, Vue 提供了相应的前缀可以用于 on：

修饰符	前缀
.passive	&
.capture	!
.once	~
.capture.once 或 .once.capture	~!

例如：

on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

修饰符	处理函数中的等价操作
.stop	event.stopPropagation()
.prevent	event.preventDefault()
.self	if (event.target !== event.currentTarget) return
按键：.enter, .13	if (event.keyCode !== 13) return 对于别的按键修饰符来说，可将 13 改为另一个按键码
修饰键：.ctrl, .alt, .shift, .meta	if (!event.ctrlKey) return (将 ctrlKey 分别修改为 altKey、shiftKey 或者 metaKey)

插槽

可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

<div>
  <slot></slot>
</div>

render: function (createElement) {
  return createElement('div', this.$slots.default)
}

也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：

<div>
  <slot :text="message"></slot>
</div>

data() {
  return {
    msg: 'hello world',
  }
},
render: function (createElement) {
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.msg
    })
  ])
}

如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段：

<div>
  <base-slot v-slot="slotProps"> {{ slotProps.text }} </base-slot>
</div>

render: function (createElement) {
  return createElement('div', [
    createElement('base-slot', {
      // 在数据对象中传递 `scopedSlots`
      // 格式为 { name: props => VNode | Array<VNode> }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

JSX

在 Vue 中使用 JSX 语法。可以让我们回到更接近模板的语法上。

render () {
  return (
    <h1>这是一个标题</h1>
  )
}

插值

<div>{this.value}</div>

指令

在 JSX 中，一些指令并不存在，所以我们可以换一种方式来处理。

v-text

<div domPropsTextContent="<p>i am a p</p>"></div>

v-html

<div domPropsInnerHTML="<p>i am a p</p>"></div>

v-show

jsx 支持 v-show 指令：

<div v-show="{this.show}"></div>

v-if

<!-- v-if -->
{true &&
<div>div</div>
} {true ?
<div>div</div>
: <span>span</span>}

v-for

{ [1, 2, 3].map(item => (
<div key="{item}">{ item }</div>
))}

v-on

<button onClick={this.handleClick}>点击事件</button>
<button on-click={this.handleClick}>点击事件</button>
<!-- 对应@click.native -->
<cmp-button nativeOnClick={this.handleClick}>原生点击事件</cmp-button>
<!-- 传递参数 -->
<button onClick={e => this.handleClick(this.id)}>触发点击事件时，传递参数</button>

v-bind

<input value="{this.value}" />

在 JSX 中可以直接使用 class="xx"来指定样式类，内联样式可以直接写成 style=“xxx”

<div class="a b" style="font-size: 12px;">Content</div>
<div class={{a: true, b: false}}>Content</div>
<div style={{color: 'red', fontSize: '14px'}}>Content</div>

v-model

有相应的插件 支持 v-model，所以可以直接使用：

<input type="text" v-model="{this.value}" />

v-slot

<my-cmp>
  默认插槽
  <div slot="a">具名插槽 a</div>
</my-cmp>

v-pre

v-cloak

v-once

以上三个指令，不常用，无替代方案

Ref

<div ref="xxx">xxx</div>

当遍历元素或组件时，如：

[1, 2, 3].map((item) => (
  <div ref="xx" key={item}>
    {item}
  </div>
));

会发现从 this.$refs.xxx 中获取的并不是期望的数组值，此时就需要将 refInFor 属性设置为 true 了：

[1, 2, 3].map((item) => (
  <div ref="xx" refInFor={true} key={item}>
    {item}
  </div>
));

自定义指令

render () {
  // 1
  return (
    <input v-splice={{value: this.value, modifiers: {number: true }}}/>
  )

  // 2
  const directives = [
    {
      name: 'splice',
      value: this.value,
      modifiers: {number: true }
    }
  ];

  return (
    <div {...{ directives} }></div>
  )
}

过滤器

<!-- 正常使用过滤器 -->
<div>{{ msg | capitalize }}</div>

<!-- 在jsx中使用过滤器 -->
<div>{ this.$options.filters('capitalize')(this.msg)}</div>

插槽

模板写法：

<!-- 组件内 -->
<div class="demo">
  <slot name="header"></slot>
  <slot></slot>
</div>

<!-- 使用时 -->
<my-cmp>
  default
  <template v-slot:header>header</template>
</my-cmp>

JSX 写法：

<!-- 组件内 -->
<div class="demo">{ this.$slots.header } { this.$slots.default }</div>

<!-- 使用时 -->
<my-cmp>
  default
  <template slot="header">header</template>
</my-cmp>

作用域插槽：
模板写法：

<!-- 组件内 -->
<div class="demo">
  <slot :text="'HelloWorld'"></slot>
</div>

<!-- 使用时 -->
<my-cmp v-slot="slotProps"> {{ slotProps.text }} </my-cmp>

JSX 写法：

<!-- 组件内 -->
<div class="demo">
  {
    this.$scopedSlots.default({
      text: 'HelloWorld',
    })
  }
</div>

<!-- 使用时 -->
<div id="app">
  <base-demo {...{
    scopedSlots: {
      default: props => props.text
    },
  }}></base-demo>
</div>

函数式组件

当一个组件不需要状态（即响应式数据）、不需要任何生命周期场景、只接受一些 props 来显示组件时，我们可以将其标记为函数式组件。

functional: true,

因为函数式组件只是函数，所以渲染开销会低很多。

在 2.3.0 之前的版本中，如果一个函数式组件想要接收 prop，则 props 选项是必须的。在 2.3.0 或以上的版本中，你可以省略 props 选项，所有组件上的 attribute 都会被自动隐式解析为 prop。

为了弥补缺少的实例，render 函数提供第二个参数 context 作为上下文。context 包括如下字段：

• props：提供所有 prop 的对象
• slots: 一个函数，返回了包含所有插槽(非作用域)的对象
• scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。
• data：传递给组件的整个数据对象，作为 createElement 的第二个参数传入组件
• parent：对父组件的引用
• listeners: (2.3.0+) 一个包含了所有父组件为当前组件注册的事件监听器的对象。这是 data.on 的一个别名。
• injections: (2.3.0+) 如果使用了 inject 选项，则该对象包含了应当被注入的属性。
• children: VNode 子节点的数组，包含了所有的非作用域插槽和非具名插槽。

slots() VS children

示例 1：

<base-level :level="1" @click="handleClick">
  <template v-slot:header>
    <div>我是头部</div>
  </template>

  <div>div</div>
  <p>p</p>
  <template>template</template>
</base-level>

slots()的结果为：

{
  default:[<div>div</div>, <p>p</p>, template],
  header: [<div>我是头部</div>]
}

children 的结果为：

[<div>div</div>, <p>p</p>, template]

示例 2：

<base-level :level="1" @click="handleClick">
  <template v-slot:header>
    <div>我是头部</div>
  </template>

  <template v-slot:default>
    <div>div</div>
  </template>

  <p>p</p>
  <template>template</template>
</base-level>

slots()的结果为：

{
  default:[<div>div</div>],
  header: [<div>我是头部</div>]
}

children 的结果为：

[<div>div</div>, <p>p</p>, template]

基于模板的函数式组件

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

<template functional> </template>

过渡_单元素过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

单元素/组件的过渡

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

• 条件渲染 (使用 v-if)
• 条件展示 (使用 v-show)
• 动态组件
• 组件根节点

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

---

1. v-enter：
   定义进入过渡的开始状态。
   在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：
   定义进入过渡生效时的状态。
   在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。
   这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to:
   定义进入过渡的结束状态(2.1.8+) 。
   在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

---

4. v-leave：
   定义离开过渡的开始状态。
   在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：
   定义离开过渡生效时的状态。
   在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
   这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to:
   定义离开过渡的结束状态(2.1.8+) 。
   在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

---

图示：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyaBvG6r-1674023267971)(https://cn.vuejs.org/images/transition.png)]

类名前缀

1. transition 无 name 特性
   类名前缀为 v-。

2. transition 有 name 特性
   如 name 为 fade，则类名前缀为 fade-。

CSS 动画

CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

自定义过渡的类名

我们可以通过以下 attribute 来自定义过渡类名：

• enter-class
• enter-active-class
• enter-to-class (2.1.8+)
• leave-class
• leave-active-class
• leave-to-class (2.1.8+)

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库（如 Animate.css）结合使用十分有用。

Animate.css 官网地址：https://daneden.github.io/animate.css/
安装方式：npm install animate.css --save

同时使用过渡和动画

可使用 type 属性，来声明需要 Vue 监听的类型，type 值可为 animation 或 transition 。

当不设置 type 时，默认会取 transitioned 和 animationed 两者更长的为结束时刻。

显性的过渡时间

在一些情况下，Vue 可以自动得出过渡效果的完成时机，从而对 dom 进行处理。

但是有些时候，我们会设置一系列的过渡效果，例如嵌套元素也有过渡动效，其过渡效果的时间长于父元素。此时我们可以设置 duration 属性，定制一个显性的过渡持续时间（以毫秒记）：

<transition :duration="1000">...</transition>

也可以定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

初始渲染的过渡

可以通过 appear attribute 设置节点在初始渲染的过渡。

和进入/离开过渡一样，同样也可以自定义 CSS 类名。如：

appear-class="appear-enter"
appear-active-class="appear-enter-active"
appear-to-class="appear-enter-to"

JavaScript 钩子

可以在属性中声明 JavaScript 钩子:

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

• before-enter 动画入场前，可以在其中设置元素开始动画之前的起始样式
• enter 动画入场中，可以在其中写动画
• after-enter 动画完成后
• enter-cancelled 取消动画

对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

设置了 appear 特性的 transition 组件，也存在自定义 JavaScript 钩子：

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

结合 Velocity.js

Velocity.js 官网地址：http://velocityjs.org/
安装方式: npm install velocity-animate

过渡_多元素过渡

当切换展示的元素标签名相同时，需要给每一个元素设置不同的 key 值，否则 Vue 为了效率只会替换相同标签内部的内容。

<transition>
  <div v-if="show" key="world">hello world</div>
  <div v-else key="shanshan">hello shanshan</div>
</transition>

在一些场景中，可以通过给同一个元素的 key 值设置不同的状态来替代 v-if 和 v-else。如：

<transition>
  <div :key="keyName">hello {{ key Name}}</div>
</transition>

keyName: 'world',

过渡模式

Vue 提供一个一个 mode 特性，可以给多个元素过渡应用不同的模式，mode 的值可为：

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

多组件过渡

我们可以使用动态组件切换展示不同的组件。

过渡_列表过渡

当想要给一个列表添加过渡动效时，我们可以使用 <transition-group> 组件。

该组件的特点：

• 不同于 ，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

列表的排序过渡

<transition-group> 组件提供了一个新的特性：v-move，它会在元素改变定位的过程中应用。
如何使用？通过类名即可设置：.v-move {}。
当给 <transition-group> 设置 name 特性时，例如 name 为 fade，则 v-move 在使用时，需要替换为 fade-move。

注意：当移除一个列表元素时，需要将移除的元素脱离文档流，否则，要溢出的元素在移除过渡中一直处于文档流中，会影响到后面元素的 move 过渡效果。

内部的实现：Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。

列表的交错过渡

如果要给列表中的元素，应用更丰富的过渡效果，可以配合 JavaScript 钩子。

过渡_复用过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 或者 作为根组件，然后将任何子组件放置在其中就可以了。

注意：当使用函数式组件复用过渡时，不要设置 css 作用域。

组件_异步组件

在项目中，有些组件不会在第一次进入首屏时加载，而是当执行了某些操作时，才会加载进来，所以此时，我们可以将该组件设置成异步加载，什么时候用，什么时候再加载进来，以达到提升首屏性能的目的。

使用方法：

components: {
  AsyncCmp: () => import(url);
}

将多个需要同时加载的组件合并到一个文件中：

components: {
  AsyncCmp1: () => import(/* webpackChunkName: "async" */ 'url'),
  AsyncCmp2: () => import(/* webpackChunkName: "async" */ 'url'),
}

异步加载的文件，会在 link 标签上设置 el=“prefech”。浏览器会在空闲时间内下载对应的资源，使用时可以直接从缓存中获取。与之对应的 el=“preload”，会及时下载对应的资源。

VueRouter_基础

什么是路由？

路由是根据不同的 url 地址展现不同的内容或页面。
早期的路由都是后端直接根据 url 来重载页面实现的，即后端控制路由。
后来页面越来越复杂，服务器压力越来越大，随着 ajax（异步刷新技术）的出现，页面的实现非重载就能刷新数据，让前端也可以控制 url 自行管理，前端路由由此而生。

什么时候使用前端路由？

前端路由更多用在单页应用上，也就是 SPA(Single Page Web Application)，在单页面应用中，大部分页面结果不变，只改变部分内容的使用。

安装路由

安装：npm install vue-router。

使用路由

JavaScript

1. 引入路由

import VueRouter from "vue-router";

2. 使用路由

Vue.use(VueRouter);

3. 定义路由组件

// 可以从其他文件 import 进来
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };

4. 定义路由

// 每个路由应该映射一个组件
const routes = [
  { path: "/foo", component: Foo },
  { path: "/bar", component: Bar },
];

5. 创建 router 实例，然后传 routes 配置

const router = new VueRouter({
  routes,
});

6. 创建和挂载根实例

const app = new Vue({
  router,
}).$mount("#app");

html

<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>

router-link class

• router-link-exact-active 当前展示路径完全匹配组件 to 属性的值
• router-link-active 当前展示路径包含 to 属性的值

更改 class 名

VueRouter({
  linkActiveClass: "link-active",
  linkExactActiveClass: "link-exact-active",
});

hash 模式

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

history 模式

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

VueRouter({
  mode: "history",
});

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

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

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

VueRouter_命名路由-嵌套路由-重定向-别名

命名路由

可以通过一个名称标识一个路由，这样在某些时候会显得更方便一些，特别是在链接一个路由，或者是执行一些跳转时，可以在创建 Router 实例时，在 routes 配置中给某个路由设置名称：

routes = [
  {
    path: "/activity/personal",
    name: "personal",
    component: Personal,
  },
];

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：

<router-link :to="{ name: 'personal' }">个人中心</router-link>

嵌套路由

一个被 router-view 渲染的组件想要包含自己的嵌套 router-view 时，可以使用嵌套路由，如：

{
  path: '/activity',
  component: () => import('./views/Activity'),
  children: [
    {
      path: '/activity/academic',
      name: 'academic',
      component: () => import('./views/Academic'),
    },
    {
      path: '/activity/personal',
      name: 'personal',
      component: () => import('./views/Personal'),
    },
    {
      path: '/activity/download',
      name: 'download',
      component: () => import('./views/Download'),
    }
  ],
}

经过这样的设置，在 Activity 组件中就可以使用 router-view 了。
子路由的 path 可以简写：

path: "personal";

这样会自动将父路由的路径，拼接在子路由前，最终结果为：/activity/personal。

当访问 /activity 下的其他路径时，并不会渲染出来任何东西，如果想要渲染点什么，可以提供一个空路由：

{
  path: '/activity',
  children: [
    {
      path: '',
      component: () => import('./views/Academic'),
    },
  ],
}

重定向

重定向也是通过 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" }],
});

VueRouter_编程式的导航

通过在 Vue 根实例的 router 配置传入 router 实例，$router、 $route 两个属性会被注入到每个子组件。

$router

路由实例对象。

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例
方法，通过编写代码来实现。

$router.push

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 $router.push(…)。

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

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
this.$router.push("home");

// 对象
this.$router.push({ path: "home" });

// 命名的路由
this.$router.push({ name: "user" });

$router.replace

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是替换掉当前的 history 记录。

声明式	编程式
<router-link :to="..." replace>	this.$router.replace(…)

$router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
this.$router.go(1);

// 后退一步记录，等同于 history.back()
this.$router.go(-1);

// 前进 3 步记录
this.$router.go(3);

// 如果 history 记录不够用，那就默默地失败呗
this.$router.go(-100);
this.$router.go(100);

$route

只读，路由信息对象。

$route.path

字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。

$route.params

一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。

$route.query

一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

$route.hash

路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。

$route.fullPath

完成解析后的 URL，包含查询参数和 hash 的完整路径。

$route.matched

一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。
js const router = new VueRouter({ routes: [ // 下面的对象就是路由记录 { path: '/foo', component: Foo, children: [ // 这也是个路由记录 { path: 'bar', component: Bar } ] } ] })

当 URL 为 /foo/bar，\$route.matched 将会是一个包含从上到下的所有对象 (副本)。

$route.name

当前路由的名称，如果有的话

$route.redirectedFrom

如果存在重定向，即为重定向来源的路由的名字。

VueRouter_动态路由匹配

当我们需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”来达到这个效果：

const User = {
  template: "<div>User</div>",
};

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

经过这样的设置，像 /user/foo 和 /user/bar 都将映射到相同的路由。

一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。

VueRouter_命名视图-路由组件传参

命名视图

想同时展示多个视图时，并且每个视图展示不同的组件时，可以使用命名视图。

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 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,
      },
    },
  ],
});

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦。

布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

const router = new VueRouter({
  routes: [
    {
      path: "/promotion/from-newsletter",
      component: Promotion,
      props: { newsletterPopup: false },
    },
  ],
});

函数模式

你可以创建一个函数返回 props。函数的第一个参数是 route （即$route）。

const router = new VueRouter({
  routes: [
    {
      path: "/search",
      component: SearchUser,
      props: (route) => ({ query: route.query.q }),
    },
  ],
});

VueRouter_导航守卫

导航：路由正在发生变化。

导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫被分成三种：全局的、单个路由独享的、组件内的。

全局守卫

是指路由实例上直接操作的钩子函数，触发路由就会触发这些钩子函数。

全局前置守卫 beforeEach

在路由跳转前触发，一般被用于登录验证。

const router = new VueRouter({ ... })

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

参数说明：

• to 目标路由对象
• from 即将要离开的路由对象
• next 三个参数中最重要的参数。
  • 必须调用 next()，才能继续往下执行一个钩子，否则路由跳转会停止
  • 若要中断当前的导航，可以调用 next(false)。
  • 可以使用 next 跳转到一个不同的地址。终端当前导航，进入一个新的导航。next 参数值和$routet.push 一致。
  • next(error)。2.4+，如果传入的参数是一个 Error 实例，则导航会被终止，且该错误会被传递给 router.onError() 注册过的回调。

全局解析守卫 beforeResolve

和 boforeEach 类似，路由跳转前触发。

和 beforeEach 的区别：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

const router = new VueRouter({ ... })

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

全局后置钩子 afterEach

和 beforeEach 相反，路由跳转完成后触发。

const router = new VueRouter({ ... })

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

路由独享守卫

是指在单个路由配置的时候也可以设置的钩子函数。

beforeEnter

和 beforeEach 完全相同，如果都设置则在 beforeEach 之后紧随执行。

const router = new VueRouter({
  routes: [
    {
      path: "/home",
      component: Home,
      beforeEnter: (to, from, next) => {
        // ...
      },
    },
  ],
});

组件内守卫

是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。

beforeRouteEnter

路由进入之前调用。

在该守卫内访问不到组件的实例，this 值为 undefined。在这个钩子函数中，可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用 next 并在回调中通过 vm 访问组件实例进行赋值等操作，（next 中函数的调用在 mounted 之后：为了确保能对组件实例的完整访问）。

beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建

    next( vm => {
    // 通过 `vm` 访问组件实例
  })
  },

beforeRouteUpdate

在当前路由改变时，并且该组件被复用时调用，可以通过 this 访问实例。

何时组件会被复用？

• 动态路由间互相跳转
• 路由 query 变更

beforeRouteUpdate (to, from, next) {
  // 在当前路由改变，但是该组件被复用时调用
  // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
  // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},

beforeRouteLeave

导航离开该组件的对应路由时调用，可以访问组件实例 this。

beforeRouteLeave (to, from, next) {
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

完整的导航解析流程

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

VueRouter_路由元信息

定义路由的时候可以配置 meta 字段，用于自定义一些信息。

const router = new VueRouter({
  routes: [
    {
      path: "/foo",
      component: Foo,
      children: [
        {
          path: "bar",
          component: Bar,
          meta: { requiresLogin: true },
        },
      ],
    },
  ],
});

VueRouter_过渡动效-滚动行为

过渡动效

是基本的动态组件，所以我们可以用 组件给它添加一些过渡效果。

<transition>
  <router-view></router-view>
</transition>

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

注意: 这个功能只在支持 history.pushState 的浏览器中可用。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法：

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }
})

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

scrollBehavior 返回滚动位置的对象信息，长这样：

• { x: number, y: number }
• { selector: string, offset? : { x: number, y: number }} (offset 只在 2.6.0+ 支持)

scrollBehavior (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash // selector 的 值为 hash值
    }
  }
}