摘要:
购物车 ajax 接口请求拆分到 service 文件夹中 路由切换动态 购物车动画,使用 Vue 的 JS 方式的半场动画 全局创建组件实例函数 阅读全文
posted @ 2019-12-01 19:48
yuxi2018
阅读(514)
评论(0)
推荐(0)
摘要:
登录模块 需要做路由的守卫,有些模块是需要被保护的,必须登录才能访问。 常见手法是给路由添加 来做标识,表示需要做认证。 在 Vuex 中存储登录状态 文件夹下的服务 登录组件中提交事件处理过程 需要考虑的检查点 如何守卫路由 如何进行异步操作 如何保存登录状态 如何模拟接口 HTTP 拦截器 新建 阅读全文
posted @ 2019-12-01 19:47
yuxi2018
阅读(2907)
评论(0)
推荐(0)
摘要:
获取数据的两种方式 导航完成之后获取数据: 先完成导航,然后在接下来的组件生命周期钩子 中获取数据。在数据获取期间展示一个 加载中的状态提示。 导航完成之前获取: 导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。 导航完成之后获取数据(可展示loading) 在组件的 钩子中获取数 阅读全文
posted @ 2019-12-01 19:37
yuxi2018
阅读(1176)
评论(0)
推荐(0)
摘要:
路由元信息 meta 在路由列表中,每个路由都有一个 元数据字段,我们可以在这里配置一些自定义信息,供页面组件或路由钩子函数中使用。在路由跳转的时候,提供我们判断条件。 在组件中获取 meta 数据 在路由钩子中获取 meta 数据,一般用于: 改变网页标题,用户登录鉴权 示例: 用户登录鉴权, 如 阅读全文
posted @ 2019-12-01 19:36
yuxi2018
阅读(2051)
评论(0)
推荐(0)
摘要:
导航守卫 所谓的导航守卫,就是路由的钩子函数。主要用来通过 跳转 或 取消 导航。导航守卫分三种: 全局、路由独享、组件级的 。 注意: 参数或查询的改变并不会触发进入和离开的导航守卫。可以通过 监听 对象,或使用 的组件内守卫。 全局前置守卫 进入路由之前的钩子函数,接受 函数,在此可以阻止进入路 阅读全文
posted @ 2019-12-01 19:35
yuxi2018
阅读(269)
评论(0)
推荐(0)
摘要:
命名视图 当一个页面想展示多个视图,而不是嵌套展示时,就需要使用命名视图。在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 没有设置名字,则默认的名字为 由于一个视图出口渲染一个对应的组件,因此,对于同一个路由,多个视图就需要多个组件。在路由配置中 组件配置必须带有 阅读全文
posted @ 2019-12-01 19:34
yuxi2018
阅读(455)
评论(0)
推荐(0)
摘要:
编程式导航 除了使用 a`标签来定义导航链接,还可以借助 的实例方法来跳转导航,这种通过编写 代码来实现的方式叫编程式导航。 router.push(location, onComplete?, onAbort?) 在 实例内部,通过 访问路由实例。可以使用 方法来跳转导航。这个方法会向 栈添加一个 阅读全文
posted @ 2019-12-01 19:33
yuxi2018
阅读(382)
评论(0)
推荐(0)
摘要:
嵌套路由 在入口模板中设置的 为子路由匹配的出口。 javascript const User = { template: ` User {{ $route.params.id }} ` } 要在嵌套的出口中渲染组件,则需要在 的参数中配置 注意: 在子路由中 开头的嵌套路径会被当作根路径。如果你要 阅读全文
posted @ 2019-12-01 19:33
yuxi2018
阅读(306)
评论(0)
推荐(0)
摘要:
动态路由配置 像 和`/user/bar ID User`组件。可以使用 动态路径参数 来达到这个效果。 动态路径参数 使用冒号 标记,后面为参数的名称,参数会被设置到 中。 注意: 带 冒号的配置可以理解为正则匹配,因此你可以在最后设置一个 的惰性匹配,表示可以出现 0 次或 1次。 相应路由参数 阅读全文
posted @ 2019-12-01 19:32
yuxi2018
阅读(2535)
评论(0)
推荐(0)
摘要:
路由重定向 通过 配置来完成,从 重定向到 ;一般用于路由匹配错误时,重定向到404页面或首页。 别名 别名:可以理解为一个人的艺名或小名,只是换了个叫法。 的別名是 ,意味着,当前访问 时, 会保持为 , 但路由匹配规则为 ,就像访问 一样。别名的功能让你可以自由的将 结构映射到任意的 ,而不是受 阅读全文
posted @ 2019-12-01 19:31
yuxi2018
阅读(401)
评论(0)
推荐(0)
摘要:
router link 声明式导航组件标签 支持用户在具有路由功能的应用中(点击)导航。通过 属性指定目标地址,默认渲染成 tag CSS router link active`,可以全局配置激活类名,也可以属性的形式设置单个元素的激活类名。 将激活 class 应用在外层元素 外层元素必须是其他标 阅读全文
posted @ 2019-12-01 19:29
yuxi2018
阅读(466)
评论(0)
推荐(0)
摘要:
什么是路由 路由是根据不同的 地址展示不同的内容或页面。可分为 前端路由 和 后端路由 。 后端路由: 通过用户请求的 导航到具体的 页面;每跳转到不同的 ,都是重新访问服务端,然后服务端返回页面,页面也可以是服务端获取数据和模版组合,返回 ,也可以是直接返回模版 ,然后由前端再去请求数据,使用前端 阅读全文
posted @ 2019-12-01 19:28
yuxi2018
阅读(279)
评论(0)
推荐(0)
摘要:
Module 模块 Vuex 允许将 store 分割成模块(module), 每个模块拥有自己的state、mutation、action、getter甚至是嵌套子模块, 从上至下进行同样方式的分割。分割的好处是让代码更加清晰, 易于维护管理. 模块划分及访问 模块的局部状态 模块内部的 muta 阅读全文
posted @ 2019-12-01 17:48
yuxi2018
阅读(189)
评论(0)
推荐(0)
摘要:
Action 异步操作 通常处理异步操作, 通过 store.dispatch 派发一个 action, 在 action 内部进行提交mutation 变更状态 action函数接收一个与store实例具有相同方法和属性的context对象。 可以调用 context.commit 提交 muta 阅读全文
posted @ 2019-12-01 17:47
yuxi2018
阅读(179)
评论(0)
推荐(0)
摘要:
Mutation 更改 state 的唯一方式 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。 每个 mutation 都有一个字符串的事件类型(type)和一个回调函数(handler), 这个回调函数就是实际进行状态更改的地方, 接收 state 作为第一个参数. 阅读全文
posted @ 2019-12-01 17:46
yuxi2018
阅读(218)
评论(0)
推荐(0)
摘要:
Getter 依赖 state 计算后的数据状态 getter 是从 store 中的 state 中派生出的一些状态, getter 的返回值会根据依赖被缓存起来, 且只有依赖发生改变才会被重新计算. 定义 getters 访问 Vuex 中的 getter 数据 mapGetter 辅助函数 辅 阅读全文
posted @ 2019-12-01 17:44
yuxi2018
阅读(328)
评论(0)
推荐(0)
摘要:
State 状态(共享的源数据) Vuex 使用 单一状态数 : 用一个对象包含了全部的应用层级状态, 作为一个"唯一数据源"而存在. 在 Vue 组件中获得 Vuex 的状态 Vuex 中的状态存储是响应式的, 读取状态最简单的方法就是在 计算属性 中返回某个状态 JavaScript const 阅读全文
posted @ 2019-12-01 17:43
yuxi2018
阅读(160)
评论(0)
推荐(0)
摘要:
Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式库 采用集中式存储管理应用的所有组件的状态,并以响应的规则,保证状态以一种可预测的方式发生变化 可以使用 devtools 调试工具进行调试 Vuex 借鉴了 Flux、Redux的思想 Vuex 中的状态存储是响应 阅读全文
posted @ 2019-12-01 17:41
yuxi2018
阅读(294)
评论(0)
推荐(0)

浙公网安备 33010602011771号