vue-router: 路由
如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：
在你的文件夹下的 src 文件夹下的 main.js 文件内写入以下代码
动态路由匹配
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID
各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic
segment）来达到这个效果：
{path:"/two:id",component:{template:"#b"},},
当我们在地址后面直接添加任意字符,我们会发现文档内容随着我们的更改而改变.
嵌套路由
我们经常将动态路由和嵌套路由共同使用,嵌套路由即是在原路由的基础上增加一个 children ,children 是一个数组.并且我们还需要在原来的组件上添加< router-view >来渲染 chlidren 里面的路由.
编程式导航
除了使用
router.push(location)
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
当你点击
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。
axios
通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛
// 引入模块
import axios from 'axios'
// 发送 ajax 请求
axios.get(url)
.then(response => {
console.log(response.data) // 得到返回结果数据
})
.catch(error => {
console.log(error.message)
})
vuex 是什么简单来说: 对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)
状态自管理应用
1）state: 驱动应用的数据源
2）view: 以声明方式将 state 映射到视图
3）actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)
vuex 核心概念和 API
state
1）vuex 管理的状态对象
2）它应该是唯一的
const state = {
xxx: initValue
}
mutations
1）包含多个直接更新 state 的方法(回调函数)的对象
2）谁来触发: action 中的 commit('mutation 名称')
3）只能包含同步的代码, 不能写异步代码
const mutations = {
yyy (state, {data1}) {
// 更新 state 的某个属性
}
}
actions
1）包含多个事件回调函数的对象
2）通过执行: commit()来触发 mutation 的调用, 间接更新 state
3）谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz'
4）可以包含异步代码(定时器, ajax)
const actions = {
zzz ({commit, state}, data1) {
commit('yyy', {data1})
}
}
getters
1）包含多个计算属性(get)的对象
2）谁来读取: 组件中: $store.getters.xxx
const getters = {
mmm (state) {
return ...
}
}
modules
1）包含多个 module
2）一个 module 是一个 store 的配置对象
3）与一个组件(包含有共享数据)对应
向外暴露 store 对象
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
组件中
import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapState(['xxx']),
...mapGetters(['mmm']),
}
methods: mapActions(['zzz'])
}
{{xxx}} {{mmm}} @click="zzz(data)"
映射 store
import store from './store'
new Vue({
store
})
store 对象
1）所有用 vuex 管理的组件中都多了一个属性$store, 它就是一个 store 对象
2）属性:
state: 注册的 state 对象
getters: 注册的 getters 对象
3）方法:
dispatch(actionName, data): 分发调用 action