Vue 嵌套路由又称多级路由。一些应用程序的UI由多层嵌套的组件组成（即一个路由下又配置了其它几个路由）。通过Vue Router，可以使用嵌套路由配置来表达这种关系。 接路由介绍中的案例，为Home组件新增两个路由News和Message。 配置嵌套路由 首先是配置Router（router/index.js）： 1import Vue from 'vue' 2import VueRouter from 'vue-router' // 引入 VueRouter 3 4// 引入组件 5import Home from '../pages/Home.vue' 6import About from...

在Vue Router中，路由路径有以下几种匹配形式： 静态匹配：即完全按照path中的内容，进行相等匹配。 动态匹配：根据path中定义的路径匹配规则匹配多个路径。 路径参数 Vue中的动态参数匹配使用的是路径参数匹配。路径参数是路径中的一个动态字段。路径参数的值会动态变化，根据这些路径参数的值，可以读取相应的数据或展示相应的页面。 例如，有个User组件对所有用户进行渲染，但用户ID不同。使用路径参数，可以让用户ID像路径中的某个资源或目录一样在URL中展示。变换不同的用户ID，就像切换目录一样路由到不同的用户界面。 使用路径参数包含3个步骤： 在Router配置文件（router/index.js）中，配置路径参数的匹配规则。...

Vue.js路由（Router）允许通过不同的URL访问不同的内容。通过Vue Router，可以实现SPA（Single Page web Application，单页Web应用）。 SPA是指整个Web应用中，只有一个完整的页面。在点击SPA中的导航链接时，浏览器不会刷新页面，而是做页面的局部更新。Vue SPA的数据通过Ajax请求获取。 在使用Router之前，需要理清SPA中Route和Router之间的关系： Route：指的是SPA的路径与页面（组件）之间的一个对应关系。通常是将路径作为某条特定Route的key，将页面作为该Route的value。 在前端路由中，Route Value指的是页面（组件）；在后端路由中...

Vuex是由Vue官方开发的一个专为Vue.js开发的状态管理库。Vuex可以集中存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 Vuex基于“单向数据流”理念： Vuex的工作模式如下： Vuex应用的核心就是Store（仓库）。Store基本上就是一个容器，它包含着应用中大部分的状态（State）。 使用Vuex也可以实现任意组件间通信。但是官方在文档中提到，如果要构建一个简单的网页应用，使用Vuex可能是繁琐冗余的。 如果应用够简单，最好不要使用Vuex。一个简单的Store模式就足够了。 如果需要构建一个中大型单页应用，就需要考虑如何更好地在组件外部管理状态，Vuex将会成为自然而然的选择。...

Vue插槽（Slots）用于向组件传递一些模板片段，让子组件在它们的组件中渲染这些片段。插槽也是属于一种父组件到子组件的组件间通行的方式。 Vue插槽有以下3种类型： 默认插槽。 具名插槽。 作用域插槽。 默认插槽 使用默认插槽时，只需在子组件模板中，将要从外部传入的模板内容，使用<slot>进行占位即可。 例如有一个名为display-frame的组件，其模板内容如下： 1<div class="display-frame"> 2 <h3>{{title}}</h3> 3 <!-- 默认插槽，等待组件的使用者进行填充 --> 4 <slot> 5 默认插槽内容。使用者没有传递结构时，会显示。 6 </slot> 7</div> 该...

通常情况下，跨域问题是由服务端依靠CORS或JSONP等方法解决。为了在开发过程中不依靠后端解决跨域问题，可以使用一台与前端页面服务的Host相同的代理服务器，将请求发送给这台代理服务器，然后再由代理服务器将请求转发给真实的服务器。 使用服务代理可绕开浏览器同源策略的限制。服务代理可以使用Nginx等应用创建，当然Vue CLI也支持创建代理。 Vue CLI代理需要在vue.config.js中进行配置。 注：Vue CLI代理仅是在开发过程中使用的。 简单代理 Vue CLI创建代理最简单的方式就是： 1module.exports = { 2 devServer: { 3 proxy:...

Vue封装了一套可以快速构建基于状态变化的过渡和过度与动画的组件<transition>（<Transition>）和<transition-group>（<TransitionGroup>）。 <transition>和<transition-group>是Vue内置的组件，无需注册即可使用。它们可以将进入和离开的动画应用到通过默认插槽传递给它的元素或组件上。 它们的进入/离开动画的切换可以由v-if或v-show所触发。 Transition 组件 <transition>用于在一个元素或组件进入和离开DOM时应用动画。 最基本的用法如下： 1<template> 2<div> 3 <button @click="isShow...

在Vue中，每个组件都有其对应的生命周期，这个过程与Vue 生命周期中描述的过程一致。 Vue组件的生命周期图示如下： 下图是尚硅谷天禹所给的有关Vue生命周期的解释： 嵌套组件的生命周期 定义存在嵌套关系的组件： App.vue（父组件，3秒后自动销毁）： 1<template> 2 <div> 3 <h1>App.vue</h1> 4 <UserInfo/> 5 </div> 6</template> 7 8<script> 9import SubComponent from './components/SubComponent.vue'; 10 11export default { 12 name: 'app', 13...

Vue组件间的通信还可借助第三方库来实现。而pubsub-js就是一种实现了消息的订阅与发布的库。使用pubsub-js可以实现任意组件间的通信。 安装pubsub-js： 1npm i pubsub-js 在需要发布或订阅消息的组件中引入pubsub-js： 1import pubsub from 'pubsub-js' 发布消息 pubsub-js发布消息可以使用pubsub.publish()方法： 1pubsub.publish(msgName, data) msgName：发送消息的名称，字符串类型。 data：发送的消息（数据），类型任意。 注：pubsub.publish()与$bus.$emit()方法不一样...

给一个子组件定义自定义事件的步骤大致如下： 在父组件中使用v-on绑定自定义事件，并定义回调。 例如给一个user-info绑定自定义事件： 1<!-- 2 App.vue 3 --> 4 5<template> 6 <div> 7 <!-- 8 通过父组件给子组件绑定一个自定义事件 9 实现子组件给父组件传递数据 10 使用 .once 修饰符，让事件只在第1次被触发时执行回调 11 --> 12 <user-info @get-name.once="getUserName"/> 13 </div> 14</template> 15 16<script> 17 import UserInfo from...