Vue学习笔记——过渡、VueRouter、Vuex

过滤器

自定义过滤器，用于一些常见的文本格式化。

过滤器可用在两个地方：双花括号插值 和 v-bind 表达式，添加在JS表达式的尾部，由“管道”符号表示:

{
    { message | filter }}


<div v-bind:id="id | filter">div>

定义过滤器

全局过滤器：

Vue.filter('filter', value => {
     })

局部过滤器：

filters:{
     
  filter (val) {
     
    return xxx;
  }
}

参数

当过滤器形式为 msg | filter 时，filter过滤器接收一个参数，参数为msg。

当过滤器形式为 msg | filter('a')时，filter过滤器接收两个参数，参数为msg, 'a'

过滤器串联

{
     {
      msg | filterA | filterB }}

在这个例子中，filterA的参数为msg，filterB的参数为filterA。

练习

首字母大写

{
    { content | capitalize }}

Vue.filter('capitalize', value => {
     
  if(!value) {
      return };
  return value.charAt(0).toUpperCase() + value.slice(1);
})

数字中间加上逗号

{
    { money | toMoney }}

Vue.filter('toMoney', value => {
     
  if(!value) {
      return };
  return value.toLocaleString();
});

数字添加文字“万”

{
    { likes | addWord }}

Vue.filter('addWord', value => {
     
  if(!value) {
      return };

  if(value > 10000) {
     
    return ( value / 10000).toFixed(1) + '万';
  }
  return value;
});

安装脚手架

安装@vue/cli

node 版本要求： >8.9，推荐使用8.11.0 +。

关于旧版本：
如果在这之前已经全局安装了旧版本的vue-cli(1.x 或 2.x)，那么需要先卸载掉。
运行：npm uninstall vue-cli -g 或 yarn global remove vue-cli。

安装：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装之后，可以在命令行中访问vue命令。

检查版本是否正确：

vue --version

快速原型开发

安装：

npm install -g @vue/cli-service-global
# OR
yarn global add @vue/cli-service-global

安装vscode插件

名字：Vetur。用于高亮.vue文件代码

利用脚手架搭建项目

 命令： vue create  项目名称(小写)


 图形化界面的方式创建： vue ui

拉取 2.x 模板 (旧版本)

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `[email protected]` 相同
vue init webpack my-project

渲染函数

基础

当我们需要使用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 titleh1>
  Some text content
  
div>

当浏览器读到这些代码时，它会建立一个DOM节点树 来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。
以上HTML对应的DOM节点树如下图所示：

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

高效地更新所有这些节点是比较困难的，不过幸运的是，我们不需要手动完成这个工作。只需要告诉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 }
  // 如果组件是其它组件的子组件，需为插槽指定名称
  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(this.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 }
      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="
i am a p
">div>

v-html

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

v-show

jsx支持v-show指令：

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

v-if

{true && <div>divdiv>}
{true ? <div>divdiv> : <span>spanspan>}

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>

<cmp-button nativeOnClick={this.handleClick}>原生点击事件cmp-button>

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

v-bind

<input value={this.value} />

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

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

v-model

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

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

v-slot

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

v-pre

v-cloak

v-once

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

Ref

<div ref="xxx">xxxdiv>

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

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


<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>headertemplate>
my-cmp>

JSX写法：

<div class="demo">
  { this.$slots.header }
  { this.$slots.default }
div>


<my-cmp>
  default
  <template slot="header">headertemplate>
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">
   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>divdiv>
  <p>pp>
  <template>templatetemplate>

base-level>

slots()的结果为：

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

children的结果为：

[
div
, 
p
, template]

示例2：

<base-level :level="1" @click="handleClick">

  <template v-slot:header>
    <div>我是头部div>
  template>

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

  <p>pp>
  <template>templatetemplate>

base-level>

slots()的结果为：

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

children的结果为：

[
div
, 
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 被删除)，在过渡/动画完成之后移除。

---

图示：

类名前缀

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 worlddiv>
  <div v-else key="shanshan">hello shanshandiv>
transition>

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

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

data(){
     
  return{
     
    keyName: 'world'
  }
},
methods:{
     
  handleClick(){
     
    const isWorld = this.keyName === "world";
    this.keyName = isWorld ? "shanshan" : "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

<div id="app">
  <h1>Hello App!h1>
  <p>
    
    
    
    <router-link to="/foo">Go to Foorouter-link>
    <router-link to="/bar">Go to Barrouter-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

路由实例对象。

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

$router.push

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

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

声明式	编程式
	this.$router.push(…)

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

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

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

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

$router.replace

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

声明式	编程式
	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)

this.$router.go(0) // 原地不动，刷新一下页面

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

<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,
                           name:route.name,
                           id:route.params.id
                         }) 
    }
  ]
})

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

Vuex_State

Vuex是vue的状态管理工具，为了更方便的实现多个组件共享状态。

安装

npm install vuex --save

使用

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
     
  state: {
     
    count: 0
  }
})

new Vue({
     
  store,
})

State

单一状态树，使用一个对象就包含了全部的应用层级状态。

在Vue组件中获得Vuex状态

Vuex 通过store 选项，提供了一种机制将状态从跟组件“注入”到每一个子组件中（调用Vue.use(Vuex)）。

通过在根实例中注册store选项，该store实例会注入到根组件下的所有子组件中，且子组件能通过this.$store访问。

<div class="home">
  {
    { $store.state.count }}
div>

mapState 辅助函数

当一个组件需要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性：

import {
      mapState } from 'vuex';

computed: {
     
  ...mapState(['count']),
},

使用不同的名字：

computed: {
     
  ...mapState({
     
    storeCount: state => state.count,
    // 简写
    storeCount: 'count', // 等同于 state => state.count
  }),
},

Vuex_Getter

store的计算属性。getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接收state作为其第一个参数、getters作为其第二个参数。

getters: {
     
  doubleCount (state) {
     
    return state.count * 2;
  }
}

通过属性访问

Getter会暴露为store.getters对象：this.$store.getters.doubleCount

通过方法访问

也可以让getter返回一个函数，来实现给getter传参

getters: {
     
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

mapGetters 辅助函数

import {
      mapsGetters } from 'vuex';

export default {
     
  computed: {
     
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

如果你想将一个 getter 属性另取一个名字，使用对象形式：

mapGetters({
     
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  storeDoubleCount: 'doubleCount'
})

Vuex_Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

const store = new Vuex.Store({
     
  state: {
     
    count: 1
  },
  mutations: {
     
    increment (state) {
     
      // 变更状态
      state.count++
    }
  }
})

不能直接调用一个mutation handler。这个选项更像是事件注册：“当触发一个类型为increment的mutation时，调用次函数。”：

this.$store.commit('increment');

在组件中提交 Mutation

除了在组件中使用 this.$store.commit('xxx') 提交 mutation之外，还可以使用 mapMutations 辅助函数：

import {
      mapMutations } from 'vuex'

export default {
     
  // ...
  methods: {
     
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    ]),
    ...mapMutations({
     
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

提交载荷（Payload）

你可以向store.commit传入额外的参数，即mutation的载荷（payload）：

mutations: {
     
  increment (state, n) {
     
    state.count += n
  }
}

store.commit('increment', 10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的mutation会更易读：

mutations: {
     
  increment (state, payload) {
     
    state.count += payload.amount
  }
}

store.commit('increment', {
     
  amount: 10
})

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
     
  type: 'increment',
  amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此 handler 保持不变：

mutations: {
     
  increment (state, payload) {
     
    state.count += payload.amount
  }
}

使用常量替代 Mutation 事件类型

把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

// mutation-types.js
export const COUNT_INCREMENT = 'COUNT_INCREMENT'

// store.js
import Vuex from 'vuex'
import {
      COUNT_INCREMENT } from './mutation-types'

const store = new Vuex.Store({
     
  state: {
      ... },
  mutations: {
     
    [COUNT_INCREMENT] (state) {
     
      // ...
    }
  }
})

用不用常量取决于自己，在需要多人协作的大型项目中，这会很有帮助。

Mutation 需遵守 Vue 的响应规则

既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

• 最好提前在你的 store 中初始化好所有所需属性。
• 当需要在对象上添加新属性时，你应该
  • 使用 Vue.set(obj, ‘newProp’, 123), 或者
  • 以新对象替换老对象。例如，利用对象展开运算符我们可以这样写：

    state.obj = {
              ...state.obj, newProp: 123 }
    

表单处理

在Vuex的state上使用v-model时，由于会直接更改state的值，所以Vue会抛出错误。

如果想要使用双向数据的功能，就需要自己模拟一个v-model: :value=“msg” @input=“updateMsg”。

双向绑定的计算属性

上面的做法，比v-model本身繁琐很多，所以我们还可以使用计算属性的setter来实现双向绑定：

<input v-model="msg">

computed: {
     
  msg: {
     
    get () {
     
      return this.$store.state.obj.msg;
    },
    set (value) {
     
      this.$store.commit(UPDATE_MSG, {
      value });
    }
  }
}

Mutation 必须是同步函数

要记住 mutation 必须是同步函数。why？

mutations: {
     
  [COUNT_INCREMENT] (state) {
     
    setTimeout(() => {
     
      state.count ++;
    }, 1000)
  },
}

执行上端代码，我们会发现更改state的操作是在回调函数中执行的，这样会让我们的代码在devtools中变的不好调试：当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用，任何在回调函数中进行的状态的改变都是不可追踪的。

严格模式

开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({
     
  // ...
  strict: true
})

在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

开发环境与发布环境

不要在发布环境下启用严格模式！严格模式会深度监测状态树来检测不合规的状态变更，要确保在发布环境下关闭严格模式，以避免性能损失。

const store = new Vuex.Store({
     
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

Vuex_Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters:

const store = new Vuex.Store({
     
  state: {
     
    count: 0
  },
  mutations: {
     
    increment (state) {
     
      state.count++
    }
  },
  actions: {
     
    increment (context) {
     
      context.commit('increment')
    }
  }
})

分发Action

store.dispatch('increment')

虽然和mutation差不多，但是在action中，可以执行异步操作，但是mutation中不行！！！

actions: {
     
  incrementAsync ({
      commit }) {
     
    setTimeout(() => {
     
      commit('increment')
    }, 1000)
  }
}

组合 Action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？

actions: {
     
  actionA ({
      commit }) {
     
    return new Promise((resolve, reject) => {
     
      setTimeout(() => {
     
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

store.dispatch('actionA').then(() => {
     
  // ...
})

Vuex 管理模式

Vuex_Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。

modules: {
     
  a,
  b
}

• 获取 state：this.$store.state.moduleName.xxx
• 获取 getter：this.$store.getters.xxx
• 提交 mutation：this.$store.commit(‘xxx’);
• 分发 action：this.$store.dispatch(‘xxx’);
• 可以通过mapXXX的方式拿到getters、mutations、actions，但是不能拿到state，如果想通过这种方式获得state，需要加命名空间。

命名空间

可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。

• 获取 state：this.$store.state.moduleName.xxx
• 获取 getter：this.$store.[‘moduleName/getters’].xxx
• 提交 mutation：this.$store.commit(‘moduleName/xxx’);
• 分发 action：this.$store.dispatch(‘moduleName/xxx’);
• 可以通过mapXXX的方式获取到state、getters、mutations、actions。

模块的局部状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。

同样，对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState。

对于模块内部的 getter，根节点状态会作为第三个参数暴露出来。