文章目录

• 渲染函数
• • 基础
  • 节点、树、以及虚拟 DOM
  • • 虚拟 DOM
  • createElement 参数
  • • 深入数据对象
  • 使用 JavaScript 代替模板功能
  • • v-if 和 v-for
    • v-model
    • 事件&按键修饰符
    • 插槽
• JSX
• • 插值
  • 指令
  • • v-text
    • v-html
    • v-show
    • v-if
    • v-for
    • v-on
    • v-bind
    • v-model
    • v-slot
    • v-pre
    • v-cloak
    • v-once
  • Ref
  • 自定义指令
  • 过滤器
  • 插槽
• 函数式组件
• • slots() VS children
  • 基于模板的函数式组件
• 过渡\_单元素过渡
• • 单元素/组件的过渡
  • 过渡的类名
  • 类名前缀
  • CSS 动画
  • 自定义过渡的类名
  • 同时使用过渡和动画
  • 显性的过渡时间
  • 初始渲染的过渡
  • JavaScript 钩子
• 过渡\_多元素过渡
• • 过渡模式
  • 多组件过渡
• 过渡\_列表过渡
• • 列表的排序过渡
  • 列表的交错过渡
• 过渡\_复用过渡
• 组件\_异步组件
• VueRouter\_基础
• • 什么是路由？
  • 什么时候使用前端路由？
  • 安装路由
  • 使用路由
  • • JavaScript
    • html
  • router-link class
  • hash 模式
  • history 模式
• VueRouter\_命名路由-嵌套路由-重定向-别名
• • 命名路由
  • 嵌套路由
  • 重定向
  • 别名
• VueRouter\_编程式的导航
• • $router
  • • $router.push
    • $router.replace
    • $router.go(n)
  • $route
  • • $route.path
    • $route.params
    • $route.query
    • $route.hash
    • $route.fullPath
    • $route.matched
    • $route.name
    • $route.redirectedFrom
• VueRouter\_动态路由匹配
• VueRouter\_命名视图-路由组件传参
• • 命名视图
  • 路由组件传参
  • • 布尔模式
    • 对象模式
    • 函数模式
• VueRouter\_导航守卫
• • 全局守卫
  • • 全局前置守卫 beforeEach
    • 全局解析守卫 beforeResolve
    • 全局后置钩子 afterEach
  • 路由独享守卫
  • • beforeEnter
  • 组件内守卫
  • • beforeRouteEnter
    • beforeRouteUpdate
    • beforeRouteLeave
  • 完整的导航解析流程
• VueRouter\_路由元信息
• VueRouter\_过渡动效-滚动行为
• • 过渡动效
  • 滚动行为

渲染函数

基础

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

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

Hello world!

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

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

节点、树、以及虚拟 DOM

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

My title
Some text content

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

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

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

{{ blogTitle }}

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

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 attributeattrs: {id: 'foo',},// 组件 propprops: {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 }// 如果组件是其它组件的子组件，需为插槽指定名称slot: 'name-of-slot',scopedSlots: {default: props => createElement('span', props.text)},
}

使用 JavaScript 代替模板功能

v-if 和 v-for

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

{{ item }}

No items found.

这些都可以在渲染函数中用 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 的直接对应—必须自己实现相应的逻辑：

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：

例如：

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

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

插槽

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

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

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

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

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

 {{ slotProps.text }} 

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

JSX

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

render () {return (
这是一个标题
)
}

插值

{this.value}

指令

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

v-text

i am a p
">

v-html

i am a p
">

v-show

jsx 支持 v-show 指令：

v-if

{true &&
div
} {true ?
div
: span}

v-for

{ [1, 2, 3].map(item => (
{ item }
))}

v-on

this.handleClick}>点击事件
点击事件

原生点击事件

 this.handleClick(this.id)}>触发点击事件时，传递参数

v-bind

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

Content
{a: true, b: false}}>Content
{color: 'red', fontSize: '14px'}}>Content

v-model

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

v-slot

默认插槽
具名插槽 a

v-pre

v-cloak

v-once

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

Ref

xxx

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

[1, 2, 3].map((item) => (
item}>{item}
));

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

[1, 2, 3].map((item) => (
true} key={item}>{item}
));

自定义指令

render () {// 1return ({value: this.value, modifiers: {number: true }}}/>)// 2const directives = [{name: 'splice',value: this.value,modifiers: {number: true }}];return (
...{ directives} }>
)
}

过滤器

{{ msg | capitalize }}

{ this.$options.filters('capitalize')(this.msg)}

插槽

模板写法：

default

JSX 写法：

{ this.$slots.header } { this.$slots.default }

default

作用域插槽：
模板写法：

 {{ slotProps.text }} 

JSX 写法：

{this.$scopedSlots.default({text: 'HelloWorld',})}

 props.text},}}>

函数式组件

当一个组件不需要状态（即响应式数据）、不需要任何生命周期场景、只接受一些 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：

div
p

slots()的结果为：

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

children 的结果为：

[
div
, 
p
, template]

示例 2：

p

slots()的结果为：

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

children 的结果为：

[
div
, 
p
, template]

基于模板的函数式组件

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

过渡_单元素过渡

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 属性，定制一个显性的过渡持续时间（以毫秒记）：

...

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

...

初始渲染的过渡

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

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

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

JavaScript 钩子

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

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

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

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

结合 Velocity.js

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

过渡_多元素过渡

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

hello world
hello shanshan

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

hello {{ key Name}}

keyName: 'world',

过渡模式

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

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

多组件过渡

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

过渡_列表过渡

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

该组件的特点：

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

列表的排序过渡

组件提供了一个新的特性：v-move，它会在元素改变定位的过程中应用。
如何使用？通过类名即可设置：.v-move {}。
当给 设置 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: "
foo
" };
const Bar = { template: "
bar
" };

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

Hello App!
Go to FooGo to Bar

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

路由实例对象。

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

$router.push

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

当你点击 时，这个方法会在内部调用，所以说，点击 等同于调用 $router.push(…)。

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

// 字符串
this.$router.push("home");// 对象
this.$router.push({ path: "home" });// 命名的路由
this.$router.push({ name: "user" });

$router.replace

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

$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: "
User
",
};const router = new VueRouter({routes: [// 动态路径参数 以冒号开头{ path: "/user/:id", component: User },],
});

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

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

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

命名视图

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

可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 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_过渡动效-滚动行为

过渡动效

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

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。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值}}
}