Vue Router 路由管理
单页应用（SPA）的核心是前端路由。Vue Router 让页面切换变得像后端路由一样自然。
一、SPA 与前端路由
- 1.1 传统多页应用 vs 单页应用
- 1.2 Hash 模式与 History 模式的区别
- 1.3
#/xxxvs/xxx的原理
二、基本配置
- 2.1 安装与引入 Vue Router
- 2.2 定义路由表——
path+component - 2.3
<router-view>渲染出口 - 2.4
<router-link>导航链接
三、动态路由
- 3.1
/user/:id动态路径参数 - 3.2
$route.params获取参数 - 3.3 路由参数变化时的组件复用问题
四、嵌套路由
- 4.1
children配置子路由 - 4.2 嵌套的
<router-view> - 4.3 实际场景——后台管理系统的侧边栏
五、导航守卫
- 5.1 全局守卫——
beforeEach - 5.2 路由独享守卫——
beforeEnter - 5.3 组件内守卫——
beforeRouteEnter - 5.4 登录权限校验的实现
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 谜思录！
相关推荐
2016-05-15
Vue.js 快速上手
从 jQuery 到 Vue，前端开发的思维方式发生了根本变化。本文用最简短的篇幅带你理解 Vue 的核心概念。 一、MVVM 模式简介 1.1 jQuery 时代的 DOM 操作 1.2 数据驱动的思想——数据变了，视图自动更新 1.3 Vue 的 MVVM 三层——Model / View / ViewModel 二、创建第一个 Vue 实例 2.1 CDN 引入 Vue.js 2.2 new Vue({ el, data, methods }) 基本结构 2.3 {{ }} 插值表达式 2.4 v...
2016-08-13
Vue 组件通信方式
组件化开发中，组件之间的数据传递是最常见的需求。本文梳理 6 种通信方式及其适用场景。 一、props / $emit（父子通信） 1.1 父组件通过 props 向子组件传值 1.2 子组件通过 $emit 触发父组件事件 1.3 .sync 修饰符的语法糖 二、$refs / $parent / $children 2.1 $refs 获取子组件实例 2.2 $parent 访问父组件 2.3 局限性——耦合度高 三、EventBus（兄弟组件通信） 3.1 创建一个空的 Vue 实例作为事件中心 3.2 $on 监听事件、$emit 触发事件 ...
2017-04-29
Axios 封装与接口管理
前后端分离后，HTTP 请求的管理变得至关重要。一个好的 Axios 封装能显著提升开发效率和代码可维护性。 一、Axios 基础 1.1 安装与引入 1.2 GET / POST / PUT / DELETE 请求 1.3 请求配置项——headers、params、timeout 1.4 响应数据结构 二、创建 Axios 实例 2.1 axios.create() 创建独立实例 2.2 配置 baseURL——区分环境 2.3 设置默认 timeout 和 headers 三、请求/响应拦截器 3.1 请求拦截——自动添加 Token...
2017-01-28
Vuex 状态管理入门
当多个组件共享同一份数据时，props 和 EventBus 开始力不从心。Vuex 提供了集中式的状态管理方案。 一、什么是状态管理 1.1 组件内部状态 vs 应用级状态 1.2 多组件共享数据的痛点 1.3 Vuex 的解决思路——单一数据源 二、核心概念 2.1 State——单一状态树 2.2 Getter——计算属性 2.3 Mutation——同步修改 State 2.4 Action——异步操作后提交 Mutation 2.5 Module——模块化拆分 三、一个购物车示例 3.1 定义 State——商品列表、购物车 3.2 Mutation——添加/...