11.1 vuerouter路由基本加载
简单四步走
- 安装
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:router,
components: { App },
template: '<App/>'
})
- 确定视图加载的位置
<router-view></router-view>
11.2 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>
11.3 vue router路由参数的传递
1.必须在路由内加入路由的name
2.必须在path后加/: +传递的参数
- 传递参数和接收参数看下边代码
<router-link :to="{name: helloearth,params:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
读取参数： $route.params.XXX
方式：===/helloworld/你好世界
<router-link :to="{path: '/helloearth',query:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
方式：===/helloworld?name=XX&count=xxx
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})
11.3.1 Axios之get请求详解
axios的简介：
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
- 安装
npm install axios
- 引入加载
import axios from 'axios'
- 将axios全局挂载到VUE原型上
Vue.prototype.$http = axios;
- 发出请求 以cnode社区API为例子
// 为给定 ID 的 user 创建请求
使用传统的function
getData(){
var self = this;
this.$http.get('https://cnodejs.org/api/v1/topics')
.then(function (res) {
//此处的this指向的不是当前vue实例
self.items = res.data.data
console.log(res.data.data)
})
.catch(function (err) {
console.log(err)
})
}
// 可选地，上面的请求可以这样做
两种传递参数的形式
axios.get('/user', {
params: {
ID: 12345
}
})
axios.get('/user', {
ID: 12345
})
---------------------------------
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')
使用CNODE社区官方的API为例展开学习
获取主题列表API：https://cnodejs.org/api/v1/topics
参数：page页码
limit 每页显示的数量
11.3.1 Axios之post请求详解
// 为给定 ID 的 user 创建请求
使用传统的function
getData(){
var self = this;
this.$http.post(url,{
page:1,
limit:10
})
.then(function (res) {
//此处的this指向的不是当前vue实例
self.items = res.data.data
console.log(res.data.data)
.catch(function (err) {
console.log(err)
})
}
POST传递数据有两种格式：
- formdata ?page=1&limit=48
- xwwwformurlencoded { page: 1,limit: 10 }
在axios中，post请求接收的参数必须是formdata
qs插件—qs.stringify
11.4 Vuex之store
用来管理状态，共享数据，在各个组件之间管理外部状态
如何使用？
第一步：引入vuex，并通过use方法使用它
第二步： 创建状态仓库
第三步：通过this.$sore.state.XXX直接拿到需要的数据
//创建状态仓库，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
}
})
//直接通过this.$sore.state.XXX拿到全局状态
11.5 Vuex的相关操作
vuex状态管理的流程
view———>actions———–>mutations—–>state————>view
除了能够获取状态如何改变状态呢？
//创建状态仓库，注意Store,state不能改
var store = new Vuex.Store({
state:{
XXX：xxx
},
mutations:{
}
})
调用： this.$store.commit(XXX);
此处的XXX是你在mucations中定义的方法名
var store = new Vuex.Store({
state:{
XXX：xxx
},
mucations:{
a:function(state){
}
},
actions:{
b:function(context){
context.commit('a');
}
}
})
调用： this.$store.dispatch(XXX);
getters:{
}
调用： this.$store.getters.getCount
注意：actions提交的是mutation,而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作
网友评论