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

user:{{ $route.params.id }}

编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

router.push(location)

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

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