vue.js---vue-router路由前端状态管理

vue­-router路由基本加载

输入不同的路由，显示不同的组件（通俗的讲就是输入不同的网址，显示不同的内容）

简单四步走:

1. 安装

npm install --save vue-router

2. 引用
   在main.js中引入

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

3. 配置路由文件，并在vue实例中注入
   在main.js中配置

var rt = new router({
routes:[{
path:'/',//指定要跳转的路径
component:HelloWorld//指定要跳转的组件
  }]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: '<App/>'
})

4. 确定视图加载的位置
   在App-vue中

<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路由参数的传递

1. 必须在路由内加入路由的name

2. 必须在path后加/: +传递的参数

3. 传递参数和接收参数看下边代码

//1. 
<router-link
  :to="{name: helloearth,params:{msg: 只有一个地球}}">
  HELLO WORLD
</router-link>
读取参数： $route.params.XXX
传递方式：===/helloworld/你好世界

//2. 
<router-link
  :to="{path: '/helloearth',query:{msg: 只有一个地球}}">
  HELLO WORLD
</router-link>
传递方式：===/helloworld?name=XX&count=xxx
函数模式

//3. 
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，
将静态值与基于路由的值结合等等。

const router = new VueRouter({
  routes: [
   { path: '/search', component: SearchUser, props: (route) => ({
    query: route.query.q }) }
  ]
})

Axios之get请求详解

发送请求，拦截响应。
axios的简介：

1. axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

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

axios的安装

1. 安装

npm install axios

2. 引入加载
   在main.js中引入

import axios from 'axios'

3. 将axios全局挂载到VUE原型上
   在main.js中

Vue.prototype.$http = axios;

4. 代码示例
   使用CNODE社区官方的API为例展开学习
   获取主题列表API：https://cnodejs.org/api/v1/topics
   参数：page页码
   limit 每页显示的数量

// 使用传统的function此时，要注意this

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)
   })
}


//ES6新语法，不需要注意this

  methods: {
    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)
        })
    }
  }
}


//两种传递参数的形式

//1. 用对象传递参数
axios.get('https://cnodejs.org/api/v1/topics'', {
 params: {
  page: 1;
  limit: 15
  ID: 12345
  }
})


//2. 拼接的方法传递参数
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15', {
 params:{
  ID: 12345
  {
})

Axios之post请求详解

POST传递数据有两种格式：

form­data ?page=1&limit=48
x­www­form­urlencoded { page: 1,limit: 10 }

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

qs插件—­qs.stringify:此方法可以将 { page: 1,limit: 10 }转化成form-data
所以要安装插件：

npm install qs

• 具体代码示例

postData(){
    this.$http.get(url,qs.stringify({
      page: 1,
      limit: 20
    }))
      .then(res => {
        this.items = res.data.data;
        console.log(res)
      })
      .catch(function(err){
        console.log(err)
      })
  }