vuerouter路由和前端状态管理

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. 在父组件中也添加一个事件

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只能包含同步操作

vuerouter路由和前端状态管理