Vue生命周期

一共8个阶段

详细说明生命周期：

beforeCreate：（创建前）在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

created：（创建后）在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前尚不可用。

beforeMount：（载入前）在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

mounted：（载入后）实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当mounted被调用时vm.$el也在文档内。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

beforeUpdate：（更新前）数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

updated：（更新后）由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

beforeDestroy：（销毁前）实例销毁之前调用。在这一步，实例仍然完全可用。

destroyed：（销毁后）实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

errorCaptured（2.5.0版本之后新增的）：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

什么是vue生命周期？

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。

第一次页面加载会触发哪几个钩子？

会触发下面这几个beforeCreate, created, beforeMount, mounted 。

DOM 渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了。

Vue和其他框架的区别

React篇

React和Vue有许多相似之处，它们都有：

使用 Virtual DOM

提供了响应式（Reactive)和组件化（Composable)的视图组件。

将注意力集中保持在核心库，伴随于此，有配套的路由和负责处理全局状态管理的库。

性能：

到目前为止，针对现实情况的测试中，Vue的性能是优于React的

生态圈

Vue.js: ES6+Webpack+unit/e2e+Vue+vue一router+单文件组件+vuex+iVew

React: ES6+Webpack+Enzyme+React+React一router+Redux

什么时候选择Vue.js

如果你喜欢用（或希望能够用）模板搭建应用，请使用Vue

如果你喜欢简单和”能用就行”的东西，请使用Vue

如果你的应用需要尽可能的小和快，请使用Vue

如果你计划构建一个大型应用程序，请使用React

如果你想要一个同时适用于Web端和原生App的框架，请选择React

如果你想要最大的生态圈，请使用React

jQuery篇

jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作

Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发

AngularJS篇

相同点：

都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。

不同点：

AngularJS的学习成本高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观；在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢；Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。

V指令

Vue内置指令

完成指定功能分为两种：

1,内置的。

2.用户自定义的。

1.v-bind：属性名 = ‘变量’

功能：将data：{变量：值}中的属性值，绑定到html标签的属性上

2.v-if指令:

true 添加到当前DOM结构中

false 从当前DOM结构中移除

3.v-for="value in 数组"

遍历数组或对象

4.v-on:事件名="事件处理函数"

事件绑定可以绑定多个方法

5.v-model 双向数据绑定的指令:

将变量和表单项进行绑定

6.v-once只绑定一次

Message:{{msg}}

7.v-html把字符串转成HTML编译

你的站点上动态渲染的任意 HTML 可能会非常危险，

因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，

绝不要对用户提供的内容插值。

vue-cli如何新增自定义指令？

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {   
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})
3.指令的使用
<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

v-if 和 v-show 区别

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

Vue模板语法-插值

插入文本：数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值

插入属性： {{ }}不能在 HTML 属性中使用，应使用 v-bind 指令

vue几种常用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

修饰符：（Modifiers）

是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

事件修饰符：

例如：

.prevent 修饰符告诉 v-on 指令对于触发的事件调用

.stop 阻止单击事件冒泡

.prevent 提交事件不再跳转

.capture 添加事件侦听器时使用事件捕获模式（由外而内触发） demo7

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调，不会引发事件冒泡

.once 点击事件将只会触发一次

说明:修饰符可以串联

例：

去百度

键值修饰符：

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加关键修饰符：

计算属性

computed

可以像绑定普通属性一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会更新。而且最妙的是我们已经以声明的方式创建了这种依赖关系：

计算属性的 getter 是没有副作用，这使得它易于测试和推理。

计算属性与methods的区别

可以将同一函数定义为一个 method 而不是一个计算属性。对于最终的结果，两种方式确实是相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。相比而言，只要发生重新渲染，method 调用总会执行该函数。

计算属性与watch的区别

计算属性是把属性缓存起来，如果从新render时，属性没有变化，则不会再从新渲染这个属性。

Watch是监控data属性，如果data改变，就可以在watch中做一些改变。

什么是vue的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。

插槽slot

在实际项目开发当中，时常会把父组件的内容与子组件自己的模板混合起来使用。而这样的一个过程在Vue中被称为内容分发。也常常被称为slot插槽。

Vue的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

单向数据流和双向数据绑定

单向数据流：

顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state

双向数据绑定：

数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度

Vue 如何去除url中的 #

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #，可以使用 vue-router 的另一种模式 history

new Router({
  mode: 'history',
  routes: [ ]
})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

组件通信

父组件向子组件通信

子组件通过 props 属性，绑定父组件数据，实现双方通信

子组件向父组件通信

将父组件的事件在子组件中通过 $emit 触发

非父子组件、兄弟组件之间的数据传递

vue-router相关

vue-router是什么它有哪些组件？

vue用来写路由一个插件。router-link、router-view

vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能

$route和$router的区别

$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法

$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

怎么定义vue-router的动态路由？

在router目录下的index.js文件中，对path属性加上/:id。使用router对象的params.id

vue路由的钩子函数

怎么获取传过来的动态参数？

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

Vue的路由实现：

hash模式和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取。

特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

hash 模式下，仅 hash 符号之前的内容会被包含在请求中，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

前端怎么控制管理路由

可以通过vue-router实例来配置路由规则列表，指定路径path与组件component的对应关系。可以通过mode这一参数控制路由的实现模式，默认值是hash，基于hash的实现方式，如果显示设置为history，则会设为基于history API的实现方式，如果浏览器不支持，可以设置fallback来控制是否需要回滚为'hash'模式。另外，如果是非浏览器端运行（如nodejs中），会将mode强制设为'abstract'模式。

vue-router支持路由嵌套、动态路由的配置、重定向及别名等，可参看官方文档。

前端路由的实现方式

在HTML5的 history API出现之前，前端路由主要是通过 hash 来实现的，hash能兼容低版本的浏览器。下面分别来介绍这2种方式。

方法一：基于hash（location.hash+hashchange事件）

我们知道location.hash的值是url中#后面的内容，如http://www.163.com#netease此网址中，location.hash='#netease'。hash满足以下几个特性，才使得其可以实现前端路由：

url中hash值的变化并不会重新加载页面，因为hash是用来指导浏览器行为的，对服务端是无用的，所以不会包括在http请求中。

hash值的改变，都会在浏览器的访问历史中增加一个记录，也就是能通过浏览器的回退、前进按钮控制hash的切换

我们可以通过hashchange事件，监听到hash值的变化，从而响应不同路径的逻辑处理。

window.addEventListener("hashchange", funcRef, false)

如此一来，我们就可以在hashchange事件里，根据hash值来更新对应的视图，但不会去重新请求页面，同时呢，也在history里增加了一条访问记录，用户也仍然可以通过前进后退键实现UI的切换。

触发hash值的变化有2种方法:

一种是通过a标签，设置href属性，当标签点击之后，地址栏会改变，同时会触发hashchange事件

to KAOLA

另一种是通过js直接赋值给location.hash，也会改变url，触发hashchange事件。

location.hash="#kaola"

route是一条路由，是将一个URL路径和一个处理函数相关联，是一条url和函数的映射规则，如上面代码中通过原型上的route可以设置一条路由规则，将一个path和其callback关联起来。

而router则更像是一个容器，或者说一种机制，它管理了一组route。简单来说，route只是进行了URL和函数的映射，而在当接收到一个URL之后，去路由映射表中查找相应的函数，这个过程是由router来处理的，如上面代码，Router管理传入的route，并且在hash改变的时候，根据当前的url响应其对应的函数。

方法二：基于History新API（history.pushState()+popState事件）

HTML5中history对象上新的API，同样能实现前端的路由。通过pushState()方法或replaceState()方法可以修改url的地址，并在popstate事件中能监听地址的改变，不同的是，手动的进行pushState()并不会触发popstate事件。

先认识下两个新增的API：history.pushState和 history.replaceState，这两个API都接收三个参数：

window.history.pushState(null, null, "http://www.163.com");

状态对象（state object），一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。

标题（title）：传入一个短标题给当前state。现在大多数浏览器不支持或者会忽略此参数，最好传入null代替；

地址（URL）：新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

这两个API的相同之处是都会操作浏览器的历史记录，而不会引起页面的刷新。不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。这两个api，加上state改变触发的popstate事件，提供了单页应该的另一种路由方式。

当我们在历史记录中切换时就会触发 popstate 事件，可以在事件中还原当前state对应的UI。对于触发popstate 事件的方式，各浏览器实现也有差异，我们可以根据不同浏览器做兼容处理。

两种方式对比，基于Hash的路由，兼容性更好；基于History API的路由，则更正式，可以设置与当前URL同源的任意URL，路径更直观。另外，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造，配置不同的路由都返回相同的页面。

使用路由时出现问题如何解决

路由的匹配规则是按照书写的顺序执行的，第一条匹配成功则不去匹配下一条，利用这一特性，可以在所有匹配路由的下面拦截匹配所有路由：

//创建路由对象并配置路由规则
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:"home"}},  // 重定向到主页
       {name:'home',path:'/home',component:Home},
       {name:'login',path:'/login',component:Login},
       {path:'*',component:NotFound},//全不匹配的情况下，匹配NotFound组件，路由按顺序从上到下，依次匹配。最后一个*能匹配全部，
    ]
});

原理同方法2，只不过在匹配到*时，重定向到根路径：

//创建路由对象并配置路由规则
let router = new VueRouter({
    routes:[
       {path:'/',redirect:{name:"home"}},  // 重定向到主页
       {name:'home',path:'/home',component:Home},
       {name:'login',path:'/login',component:Login},
       {path:'*',redirect:'/'},//路由按顺序从上到下，依次匹配。最后一个*能匹配全部，然后重定向到主页面
    ]
});

history 路由和 hash 路由的区别, 在浏览器有什么影响？

hash前端路由，无刷新

history 会去请求接口

vue-router提供两种模式的原因？

vue 是渐进式前端开发框架，为了实现 SPA ，需要引入前端路由系统（vue-router）。前端路由的核心是：改变视图的同时不会向后端发出请求。

为了达到这一目的，浏览器提供了 hash 和 history 两种模式。

1. hash ：hash 虽然出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

2. history ：history 利用了 html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会立即向后端发送请求。

因此可以说， hash 模式和 history 模式都属于浏览器自身的属性，vue-router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现路由。

实现的原理

1. hash 模式的原理是 onhashchange 事件，可以在 window 对象上监听这个事件。

2. history ：hashchange 只能改变 # 后面的代码片段，history api （pushState、replaceState、go、back、forward）则给了前端完全的自由，通过在window对象上监听popState()事件。

pushState()、replaceState() 方法接收三个参数：stateObj、title、url。

// 设置状态
history.pushState({color: "red"}, "red", "red");
// 监听状态window.onpopstate = function(event){   
console.log(event.state);  
 if(event.state && event.state.color === "red"){    
   document.body.style.color = "red"; 
  }} // 改变状态history.back();history.forward();

应用场景

通过 pushState 把页面的状态保存在 state 对象中，当页面的 url 再变回到这个 url 时，可以通过 event.state 取到这个 state 对象，从而可以对页面状态进行还原，如页面滚动条的位置、阅读进度、组件的开关等。

调用 history.pushState() 比使用 hash 存在的优势：

• pushState 设置的 url 可以是同源下的任意 url ；而 hash 只能修改 # 后面的部分，因此只能设置当前 url 同文档的 url

• pushState 设置的新的 url 可以与当前 url 一样，这样也会把记录添加到栈中；hash 设置的新值不能与原来的一样，一样的值不会触发动作将记录添加到栈中

• pushState 通过 stateObject 参数可以将任何数据类型添加到记录中；hash 只能添加短字符串

• pushState 可以设置额外的 title 属性供后续使用

劣势：

• history 在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。因此，如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面

• hash 模式下，仅 # 之前的内容包含在 http 请求中，对后端来说，即使没有对路由做到全面覆盖，也不会报 404

单页应用，如何实现其路由功能---路由原理

写在前面：通常 SPA 中前端路由有2种实现方式：

1. window.history

2. location.hash

下面就来介绍下这两种方式具体怎么实现的

一.history

1.history基本介绍

window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法，它有几个原始方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go(n) - 接受一个整数作为参数，移动到该整数指定的页面，比如go(1)相当于forward()，go(-1)相当于back()，go(0)相当于刷新当前页面
如果移动的位置超出了访问历史的边界，以上三个方法并不报错，而是静默失败

在HTML5，history对象提出了 pushState() 方法和 replaceState() 方法，这两个方法可以用来向历史栈中添加数据，就好像 url 变化了一样（过去只有 url 变化历史栈才会变化），这样就可以很好的模拟浏览历史和前进后退了，现在的前端路由也是基于这个原理实现的。

2.history.pushState

pushState(stateObj, title, url) 方法向历史栈中写入数据，其第一个参数是要写入的数据对象（不大于640kB)，第二个参数是页面的 title, 第三个参数是 url (相对路径)。

stateObj ：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。
title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

关于pushState，有几个值得注意的地方：

pushState方法不会触发页面刷新，只是导致history对象发生变化，地址栏会有反应,只有当触发前进后退等事件（back()和forward()等）时浏览器才会刷新

这里的 url 是受到同源策略限制的，防止恶意脚本模仿其他网站 url 用来欺骗用户，所以当违背同源策略时将会报错

3.history.replaceState

replaceState(stateObj, title, url) 和pushState的区别就在于它不是写入而是替换修改浏览历史中当前纪录，其余和 pushState一模一样

4.popstate事件

定义：每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件。

注意：仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器倒退按钮和前进按钮，或者使用JavaScript调用back、forward、go方法时才会触发。另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。

用法：使用的时候，可以为popstate事件指定回调函数。这个回调函数的参数是一个event事件对象，它的state属性指向pushState和replaceState方法为当前URL所提供的状态对象（即这两个方法的第一个参数）。

二.Hash

1.Hash基本介绍

url 中可以带有一个 hash http://localhost:9000/#/a.html

window 对象中有一个事件是 onhashchange，以下几种情况都会触发这个事件：

直接更改浏览器地址，在最后面增加或改变#hash；
通过改变location.href或location.hash的值；
通过触发点击带锚点的链接；
浏览器前进后退可能导致hash的变化，前提是两个网页地址中的hash值不同。

vue-router如何做用户登录权限等

router官网中进阶部分提供了导航守卫的功能，可以通过设置全局前置守卫或者路由独享守卫来做用户登陆权限的判别。

怎么定义 vue-router 的动态路由? 怎么获取传过来的值

答：在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

vue-router原理

一、vue-router——路由管理

路由配置主要有三个关键字：route routes router

route（单数）表示一条路由，它是一个对象由两部分构成（path——路径；component——组件）

例如：homeBtn——homeContent（点击homeBtn按钮页面切换到homeContent组件）；sideBtn——sideContent；这是两条路由(route)

如果路由多，这样一条一条表示显然不合理。

由此出现routes（复数）表示一组路由（路由的数组），上面的两条路由就可以这样表示：

image

具体写法：

const routes = [{path:'/home',component:homeContent},{path:'/sidebar',component:sidebarContent}]

router表示路由机制（即路由的管理者），实现原理：点击homeBtn按钮——到routes里去查找到‘/home’对应得组件homeContent，并显示页面。

写法：const router = new VueRouter({routes:routes})，简写：const router = new VueRouter({routes})

最后将router实例注入到vue根实例中，便可以使用路由

配置好路由再定义好路由的出口router-view就可以使用路由实现页面跳转了。

ps:router-link相当于a标签。

二、vuex——数据状态管理

简单说下vuex的作用：主要用于组件直接通讯。比如A和B和C为兄弟组件，组件中都用到name这个字段，A组件中如果对name字段进行更改，那该如何通知B和C组件name字段已经发生变化了呢？这个时候就可以使用Vuex来进行通讯了。先将name存起来（state管理变量初始状态的），A组件中通过触发mutation来通知state中的name发生改变。那么B和C组件就可以从vuex获取state中的name。大概就是这么个意思。

另外说一下：vuex中的几个关键要素：state、mutation、action以及vuex中自带的函数：mapState、mapMutation、mapAction、mapGetter（都是个人的理解，如有不当请指出。）

state主要定义一些初始化的变量；

mutation定义修改State的方法，有两个参数(state、value)

action定义触发mutation行为的方法；语法：方法名（context）、通过context.commit来触发mutation的方法；

getter定义获取state的方法，参数state;

上面内容主要说如何定义这些变量，下面说下如果在组件中使用这些方法：

第一种情况：设置/修改变量的两种方式：

a、在计算属性中或方法中调用mutation方法：this.$store.commit（‘方法名’,参数值）

b、使用action触发mutation方法：this.$store.dispatch(mutaion的方法）

官方不建议使用a,建议使用b。

第二种情况：获取参数

两种方式：1、this. store.getter.方法名

使用this.$store.state等这些书写方式太长。所以可以通过vuex的辅助函数：mapState等来简化书写

辅助函数的使用方法：

1、mapGetters/apState放在computed属性中。

书写方式：a、...mapGetters(['Getter定义的方法名'])

b、参数如果是count：...mapState({state=>state.count})

2、mapMutation和mapAction，一般放在method中写：...mapMutation(['mutation定义的方法名'])

active-class是哪个组件的属性？嵌套路由怎么定义？

答：vue-router模块的router-link组件。children数组来定义子路由

Vue前端面试题（上）