Vue学习(三)

标签：... Vue 学习 跳转 组件 router path 路由

ajax请求

1. xhr 一般不直接使用,层层封装
2. jquery 现在基本不用
3. axios 通过promise实现对ajax技术的一种封装
4. fetch
   promise封装异步操作
   new promise(resolve,reject),然后使用then(),成功时候调用resolve,失败调用reject.

同源策略: 协议,主机名,端口号全部一致
vue-cli开启代理服务器
请求资源不存在时,才会转发到代理服务器


字面量运算符,防止属性丢失
this.info = {...this.info,...dataObj}
了解vue-resource使用.类似axios.

插槽

默认插槽
具名插槽
作用域插槽

vuex

vue中实现集中式状态管理的插件.
使用场景

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态
3. actions,mutations,state都由store管理
   

创建store, 新建src/store/index.js
main.js配置store.

getters:类似computed属性, state类似data属性

mapState和mapGetters的两种写法:
...mapState({increment:'inc',decrement:'dec'}) //对象写法
...mapState(['increment']) //数组写法

4个map方法的使用

vuex组件化

namespaced: true, 命名空间设置为true,否则模块化mapstate会失败.
export defalut new vuex.store( {
modules: {
a: aOption,
b: bOption
})
}
...mapState('countAbout',['sum','total']);

路由route

spa(singl page web application)单页面应用
vue-router插件库
前端路由: 根据key控制组件展示
后端路由: 根据key选择函数处理请求


一般组件和路由组件

一级路由和多级路由
routes: {
{
path: '/about',
component: About
},
{
path: '/home',
component: Home,
children: {
path: 'news' // 二级路由不用加斜线/
component: News
}
}
}
跳转时候配置完整路径.

跳转路由并携带参数,to的字符串写法和对象写法

接收参数:
$route.query.id

命名路由

{
name: 'hello',
path: '/home/hello',
component: Hello
}
name配置可以替代长的path,使用时需要配置为对象形式,如:to="{name: 'hello'}"

路由的params参数

通过路径直接传递参数,需要配置path,使用占位符:,如图


路由的props配置

router的replace属性

编程式路由跳转

this.$router.push() 编程式跳转组件,保存全部历史记录
this.$router.replace() 替换历史记录.

this.$router.back() 后退
this.$router.forward() 前进
this.$router.go(n) 前进或后退n步

缓存路由组件

include="组件名称"

缓存多个组件
:include="['x','y']"

路由特有的生命周期钩子

路由组件独有的钩子函数,用于捕获路由组件的激活状态
activated(){}
deactivated(){}

全局路由守卫

前置守卫和后置守卫
类似与拦截器,对跳转做校验,决定是否跳转
在meta配置校验标识{isAuth: true}, 确认是否需要鉴权

应用场景: 设置document.title.

独享路由守卫

beforeEnter()
可以搭配后置守卫使用

组件内路由守卫

beforeRouterEnter(to,from,next) //通过路由规则,进入该组件时调用
beforeRouterLeave(to,from,next) //通过路由规则,离开该组件时调用

路由模式

hash模式(默认)
history模式

标签：...,Vue,学习,跳转,组件,router,path,路由
From： https://www.cnblogs.com/qianxilin/p/16756841.html