Vue-router和前端状态管理1.1Vue-router路由基本加载分为4步：安装：引用：配置路由文件，并在实例中注

1.1 Vue-router路由基本加载

分为4步：

安装：

npm install --save vue-router

引用：

import router from 'vue-router'
Vue.use(router)

配置路由文件，并在实例中注入：

var rt = new router({
    routes:[
        {
            path:'/',     //指定跳转路径
            component:HelloWorld    //指定要跳转的路径
        }
    ]
})

new Vue({
    el:'#app',
    router:router,
    components:{ App },
    template:'<App/>'
})

确定视图加载位置

<router-view></router-view>

1.2 vue-router路由的跳转

<template>
    <ul>
        <li>
            <router-link to="/helloworld">HelloWorld</router-link>
        </li>
        <li>
            <router-link to="/helloearth">HelloEarth</router-link>
        </li>
    </ul>
</template>

1.3 Vue-router路由参数的传递

注意：

①必须在路由内加入路由的name
②必须在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 })
        }
        ]
    })

2.1 Axios之get请求详解

axios简介：

axios是一个基于Promise用于浏览器和node.js的HTTP客户端，具有以下特征

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

一.安装

npm install axios

二.引入加载

import axios from 'axios'

三.将axios全局挂载在Vue原型上

Vue.prototype.??? = axios
//如果没有引入Vue，要先引入Vue，？？？是自定义名称

四.发送请求，以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)
    })
}


//使用箭头函数
getData(){
    this.$http.post(url,{
        page:1,
        limit:10
    })
    .then((res)=> {
        this.items = res.data.data
        console.log(res.data.data)
    })
    .catch((err)=> {
        console.log(err)
    })
}

两种传参形式

axios.get('/user', {
    params: {
        ID: 12345
    }
})

                            //params在内容少的情况下可以省略，如下
                            
axios.get('/user', {
    ID: 12345
})

---------------------------------

axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15')

获取cnode社区主题咧列表的API：cnodejs.org/api/v1/topi…

参数：page页码

limit每页显示的数量

2.2 Axios之post请求详解

// 为给定 ID 的 user 创建请求
使用传统的function
getData(){
    var self = this;
    this.$http.post(url,qs.stringify(
        {
            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传递数据有两种形式：

1.form-data ?page=1&limit=48

2.x-www-form-urlencoded { page: 1,limit: 10 }

在axios中，post请求接收的参数必须是form-data

qs插件 : qs.stringify

3.1 Vuex之store

用来管理状态，共享数据，在各个组件之间管理外部状态

使用方法：

引入vuex，并通过use方法使用它
创建状态仓库
通过this.$store.state.XXX直接拿到需要的数据

//创建状态仓库，注意Store,state不能改

var store = new Vuex.Store({
    state:{
        XXX：xxx
    }
})

//直接通过this.$sore.state.XXX拿到全局状态

3.2 Vuex的相关操作

vuex状态管理的流程 view———>actions———>mutations—–>state——>view 除了能够获取状态如何改变状态呢？