一、vue-router 路由基本加载
路由，通俗地来讲就是输入不同的网址，加载不同的组件。
- 进入项目目录
cd my-project
- 安装
npm install -save vue-router
- 在文件中引用
import router from 'vue-router'
Vue.use(router)
- 配置路由文件，并在 vue 实例中注入
var rt = new router({
routes: [{
path: '/', // 指定要跳转的路径
component: HelloWorld // 指定要跳转的组件
}]
})
new Vue({
el: '#app',
router: rt,
components: { App },
template: '<App/>'
})
- 确定视图加载的位置
<router-view></router-view>
二、vue-router 路由的跳转
<router-link to="/"></router-link>
例：
<template>
<ul>
<li>
<router-link to="/helloworld">HELLO WORLD</router-link>
</li>
<li>
<router-link to="/helloearth">HELLO EARTH</router-link>
</li>
</ul>
</template>
三、vue-router 路由参数的传递
- 必须在路由中加入路由的
name属性- 必须在
path后加/: + 传递的参数- 传递参数和接收参数见下方代码
1. 配置路由
export default new router({ // 导出路由
routes: [{
name: 'helloworld',
path: '/helloworld/:worldmsg', // 指定要跳转的路径
component: HelloWorld // 指定要跳转的组件
}, {
name: 'helloearth',
path: '/helloearth/:earthmsg',
component: HelloEarth
}]
})
2. 传递和读取参数（两种方法）
- 方法一
- 传递参数：
<router-link :to="{name:'helloworld', params:{worldmsg:'你好世界'}}">
HELLO WORLD
</router-link>
<router-link :to="{name:'helloearth', params:{earthmsg:'你好地球'}}">
HELLO EARTH
</router-link>
- 读取（接收）参数：
$route.params.xxx
要往哪个组件跳转，就由哪个组件来接收。
我是传递过来的参数：<h3>{{$route.params.worldmsg}}</h3>
- 方法二（不常用）
- 传递参数：
<router-link :to="{path:'/helloearth', query:{worldmsg:'你好世界'}}">
HELLO WORLD
</router-link>
- 读取（接收）参数：函数模式
可以创建一个函数返回props，这样便可以将参数转换成另一种类型，将静态值与基于路由的值结合等。
const router = new VueRouter({
routes: [{
path: '/search',component: SearchUser, props: (route) => ({
query: route.query.q })
}]
})
- 两种传递方式的区别：
- params 传递方式：
http://localhost:8080/helloworld/你好世界 - query 传递方式：
http://localhost:8080/helloworld?name=xx&count=xxx
四、Axios 详解
1. Axios 简介
axios 是一个基于 Promise 用于浏览器和 node.js 的 HTTP 客户端，它的功能与 ajax 相似，其本身具有以下特征：
- 在浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防止 CSRF/XSRF
2. Axios 之 get 请求详解
- 安装
npm install axios
- 在文件中引入加载
import axios from 'axios'
- 将 axios 全局挂载到 VUE 原型上
Vue.prototype.$http = axios // $ 后面的内容自定义
- 发送请求
- 以 CNode 社区官方 API 为例：
getData(){
this.$http.get('https://cnodejs.org/api/v1/topics')
.then((res) => {
this.items = res.data.data
console.log(res)
})
.catch(function(err){
console.log(err)
})
}
- GET 请求的两种参数传递形式：
axios.get('https://cnodejs.org/api/v1/topics', {
params: { // 只有一个参数时可省略params直接写参数
page: 1,
limit: 10
}
})
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
3. Axios 之 post 请求详解
POST 请求和 GET 类似，将请求中的 get 替换成 post 即可。
- POST 请求传递数据的两种格式：
form-data?page=1&limit=48
x-www-form-urlencoded {
page: 1,
limit: 10
}
注意：在 axios 中，post 请求接收的参数必须是
form-data格式
需要使用 qs 插件的-qs.stringify方法。
- 使用步骤：
安装 qs 插件：npm install qs
在文件中引入：import qs from 'qs'
在 post 请求中使用：qs.stringify({ page: 1, limit: 10 })
- 以 CNode 社区官方 API 为例：
postData(){
this.$http.get(url, qs.stringify({
page: 1,
limit: 10
})).then((res) => {
this.items = res.data.data
console.log(res)
})
.catch(function(err){
console.log(err)
})
}
五、Vuex 之 store
Vuex 是用来管理状态，共享数据，在各个组件之间管理外部状态的一个插件。例如用户的已登录状态，需要在各个组件之前进行交互。Vuex 首先会创建一个状态仓库，并将所有组件囊括其中，即这个仓库下的所有组件都可以共享仓库里的状态。
- 使用步骤：
1. 安装 vuex：npm install vuex
2. 在 main.js 文件中引入并通过use方法使用 vuex：
import Vuex from 'vuex'，Vue.use(Vuex)
3. 创建状态仓库
4. 将store注入到 Vue 实例
5. 通过this.$store.state.xxx拿到需要的数据
// 创建状态仓库（此处名称store可自定义）
var store = new Vuex.Store({
state:{
xxx：yyy
}
})
六、Vuex 的相关操作
1. 改变状态
除了能够获取状态，那么如何改变状态呢？
我们用 state 存放定义的状态，用 mutations 来改变状态。
-
mutations用法
// 创建状态仓库
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
// 定义状态改变函数
zzz: function(state){
state.num++
}
}
})
// 调用方式
this.$store.commit('zzz') // zzz 是在 mucations 中定义的方法名
-
actions用法：
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
zzz: function(state){
state.num++
}
},
actions:{
// actions 中只能对 mutation 进行操作
ccc: function(context){ // context是上下文对象
context.commit('zzz')
}
}
})
// 调用方式
this.$store.dispatch('ccc')
注意：
actions 提交的是 mutation，而不是直接变更状态。
actions 可以包含异步操作，但是 mutation 只能包含同步操作。
-
getters用法：
var store = new Vuex.Store({
state: {
num: 88
},
mutations: {
zzz: function(state){
state.num++
}
},
getters: {
getNum: function(state){
return state.num>0 ? state.num : 0
}
}
})
// 调用方式
this.$store.getters.getNum
2. vuex 状态管理流程
vuex 状态管理流程为：
view ——> actions ——> mutations ——> state ——> view
- 从视图出发，先是 actions，然后是 mutations，然后通过 mutations 来操作 state，最后再回到 view。
- 直接对状态进行操作的是 mutations，不是 actions。
- 在这个过程中，actions 不是必须存在的，但如果有异步操作，则必须包含 actions。
