vuerouter路由基本加载
四步走
1.安装
npm install --save vue-router
- 引用
import router from 'vue-router'
Vue.use(router
3.配置路由文件，并在vue实例中注入
var rt = new router({
routes:[{
path:'/',//指定要跳转的路径
component:HelloWorld//指定要跳转的组件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})
- 确定视图加载的位置
<router-view></router-view>
通过vue-router路由的跳转
1.配置路由
import router from 'vue-router'
import Vue from "vue"
import HelloWorld from '../components/HelloWorld'
import HelloEarth from '../components/HelloEarth'
Vue.use(router)
//配置路由
export default new router({
routes: [{
path: '/helloworld', //指定要跳转的路径
component: HelloWorld //指定要跳转的组件
}, {
path: '/helloearth', //指定要跳转的路径
component: HelloEarth //指定要跳转的组件
}]
})
2.设置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>
<script>
export default {
name: "list"
};
</script>
<style>
</style>
3.在app中添加list路由
vue-router参数的传递
1.必须在路由内加入路由的name
2.必须在path后加/: +传递的参数
export default new router({
routes: [{
name: 'helloworld',
path: '/helloworld/:worldmsg', //指定要跳转的路径
component: HelloWorld //指定要跳转的组件
}, {
name: 'helloearth',
path: '/helloearth/:earthmsg', //指定要跳转的路径
component: HelloEarth //指定要跳转的组件
}]
})
传递参数和接收参数看下边代码
传递参数
<template>
<ul>
<li>
<router-link :to="{name:'helloworld',params:{worldmsg:'你好世界'}}">Hello World</router-link>
</li>
<li>
<router-link :to="{name:'helloearth',params:{earthmsg:'你好地球'}}">Hello Earth</router-link>
</li>
</ul>
</template>
接收参数
<template>
<div class="hello">
<h1>Hello Earth</h1>
<h2>Essential Links</h2>我是传递过来的参数:======
<h3>{{$route.params.earthmsg}}</h3>
</div>
</template>
<template>
<div class="hello">
<h1>HelloWorld</h1>
<h2>Essential Links</h2>
我是传递过来的参数:======<h3>{{$route.params.worldmsg}}</h3>
</div>
</template>
Axios之get请求详解
- 安装
npm install axios
2.引入加载
import axios from 'axios'
Vue.prototype.$http = axios;
4.发送请求
methods: {
getData() {
var self = this;
this.$http
.get("https://cnodejs.org/api/v1/topics?page=1&limit=15")
// .then(function(res) {
// //此处的this指向的不是当前vue实例
// self.items = res.data.data;
// console.log(res.data.data);
// })
.then(res => {
this.items = res.data.data;
console.log(res);
})
.catch(function(err) {
console.log(err);
});
}
}
两种传递参数的方法
.get("https://cnodejs.org/api/v1/topics", {
params: {
page: 1,
limit: 10
}
})
.get("https://cnodejs.org/api/v1/topics?page=1&limit=15")
使用post请求大宋请求
1.安装qs插件
npm install qs
2.引入qs插件
import qs from 'qs'
3.添加post方法，注意参数需要使用插件的qs.stringify()
postData() {
this.$http
.get("url", qs.stringify())
.then(res => {
this.items = res.data.data;
console.log(res);
})
.catch(function(err) {
console.log(err);
});
}
Vuex之store
父组件向子组件传递数据
·1. 利用v-bind绑定一个数据
<son :msg="toSonMsg" @handle="getMsgFromSon"></son>
2 在data中返回数据
``
data: function() {
return {
toSonMsg: "我是你的父亲",
fromSonMsg: ""
};
},
3.子组件调用props获取数据
props: {
msg: {
type: String,
default: ""
}
},
4. 渲染到页面上
----{{msg}}
##### 子组件向父组件传递数据
1.子组件添加一个事件
<button @click="senMsgToFa">向父组件传递数据</button>
2. 在父组件中也添加一个事件
<son @handle="getMsgFromSon"></son>
3.在组件中添加数据
data: function() {
return {
toFatherMsg: "我是你的son"
};
},
4.在子组件中添加methos,
methods: {
senMsgToFa: function() {
this.$emit("handle", this.toFatherMsg);
}
},
5. 在父组件中定义data
data: function() {
return {
fromSonMsg: ""
};
},
6.在父组件中把值赋值给data
methods: {
getMsgFromSon: function(value) {
this.fromSonMsg = value;
}
},
7.把值渲染到页面上
-----------{{fromSonMsg}}
### 如何使用状态路由操作
1.引入vuex，并通过use方法使用它
import Vuex from 'vuex'
Vue.use(Vuex)
2. 第二步： 创建状态仓库
var store = new Vuex.Store({
state: {
num: 88
}
})
3.通过this.$sore.state.XXX直接拿到需要的数据
在个组件中computed方法
computed: {
getNum: function() {
return this.$store.state.num;
}
}
渲染到页面上
我是父组件拿到的全局状态:{{getNum}}
### Vuex的相关操作
vuex状态管理的流程
view———>actions———–>mutations—–>state————>view
mutations操作
1.在state中写入mutation
mutations: {
//定义状态改变函数
increase(state) {
state.num++;
},
decrease(state) {
state.num = state.num - 20
}
},
2.在组件的method中写入方法
padd() {
this.$store.commit("increase");
},
actions操作
1,在state中写入actions操作
actions: {
//context为上下文对象
decreaseAction(context) {
//actions中只能对mutation进行操作
context.commit('decrease');
}
},
2.在组件的methods中写入方法
paddaction() {
this.$store.dispatch("decreaseAction");
}
getters操作
1.在state中写入getter代码
getters: {
getNum(state) {
return state.num > 0 ? state.num : 0;
}
}
2.在组件中调用此数据
computed: {
getCount: function() {
return this.$store.getters.getNum;
}
}
注意:
> actions提交的是mutation,而不是直接变更状态
actions可以包含异步操作，但是mutation只能包含同步操作
