文章目录
渲染函数
基础
当我们需要使用 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 切换。
-
v-enter:
定义进入过渡的开始状态。
在元素被插入之前生效,在元素被插入之后的下一帧移除。 -
v-enter-active:
定义进入过渡生效时的状态。
在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。
这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 -
v-enter-to:
定义进入过渡的结束状态(2.1.8+) 。
在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
-
v-leave:
定义离开过渡的开始状态。
在离开过渡被触发时立刻生效,下一帧被移除。 -
v-leave-active:
定义离开过渡生效时的状态。
在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。
这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。 -
v-leave-to:
定义离开过渡的结束状态(2.1.8+) 。
在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
图示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kyaBvG6r-1674023267971)(https://cn.vuejs.org/images/transition.png)]
类名前缀
-
transition 无 name 特性
类名前缀为 v-。 -
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
- 引入路由
import VueRouter from "vue-router";
- 使用路由
Vue.use(VueRouter);
- 定义路由组件
// 可以从其他文件 import 进来
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
- 定义路由
// 每个路由应该映射一个组件
const routes = [
{ path: "/foo", component: Foo },
{ path: "/bar", component: Bar },
];
- 创建 router 实例,然后传
routes
配置
const router = new VueRouter({
routes,
});
- 创建和挂载根实例
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`
}
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的 beforeEach 守卫。
- 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
- 在路由配置里调用 beforeEnter。
- 解析异步路由组件。
- 在被激活的组件里调用 beforeRouteEnter。
- 调用全局的 beforeResolve 守卫 (2.5+)。
- 导航被确认。
- 调用全局的 afterEach 钩子。
- 触发 DOM 更新。
- 用创建好的实例调用 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值
}
}
}