vue-router路由和前端状态管理

一、路由简单四步走

通俗地说：路由是输入不同网址打开，显示不同内容（即不同网址就是不同的路由）
专业地说：访问不同的路由，加载不同的组件

1､安装

npm install --save vue-router // 一定要在项目文件夹下安装

2､引用

import router from 'vue-router' //在入口文件main.js中引入，也可以是哪个文件用到，哪个文件引入
Vue.use(router)

此处一坑：router的引用，切记不能用npm 安装自带的 import router from './router'，会报错

image.png

要换成 import router from 'vue-router' 即可

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

var rt = new router({//配置路由
    routes:[{
        path:'/', //指定要跳转的路径
        components:HelloWorld //指定要跳转的组件
    }]
})

new Vue({//在 vue 实例中注入
    el: '#app',
    router:router,
    components: {App},
    template: '<App/>'
})

4､确定视图要加载的位置

<router-view></router-view> // 定义的是path对应的组件渲染的位置

二、路由的跳转

<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后加上 /: 和传递的参数

export default new Router({
  routes: [
    {
      path: '/helloworld/:worldmsg', //在path后加上  /: 和 传递的参数
      name: 'helloworld', //加入路由的name
      component: HelloWorld
    },
    {
      path: '/helloearth/:earthmsg',
      name: 'helloearth',
      component: HelloEarth
    }
  ]
})

3､传递参数

<router-link :to="{name: helloearth,params:{msg:'你我她'}}">Hello Earth</router-link>// to前面 切记加冒号（:）

4､接收参数（往哪个组件跳转，就是哪个组件接收）

$route.params.msg // msg是要传递的参数
//形式：..../helloworld/你好世界 
    
<template>
  <div class="hello">
    <h1>Hello World</h1>
    <h2>Essential Links</h2>
    <h3>{{$route.params.msg}}</h3>
    <hr>
  </div>
</template>

四、Axios中的get请求

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

a、从浏览器中创建 XMLHttpRequest

b、从nodejs 发出 http 请求

c、支持Promise API

d、拦截请求和响应

e、转换请求和响应数据

f、取消请求

g、自动转换JSON数据

h、客户端支持防止 CSRF/ XSRF

2､axios 四步走

a、安装

npm install axios

b、引入加载

import axios from 'axios'

c、将axios 全局挂载到 VUE 原型上

Vue.prototype.$http= axios //$http名字随意

d、发出请求，以cnode社区API 为例

// 为给定的id 的 user 创建请求

getData(){//使用传统的function
    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(){//使用es6
   this.$http.get('https://cnodejs.org/api/v1/topics') //请求
       .then(res =>{
            self.items = res.data.data
            console.log(res.data.data)           
       })
        .catch(err =>{
            console.log(err)
        })
}

小总结：Get 请求有三种方式：

a、没参数时，直接通过url

axios.get('https://cnodejs.org/api/v1/topics')

b、有参数时，两种传递参数形式

axios.get('https://cnodejs.org/api/v1/topics', {
    params: {//params 里面可以接多个对象
      id: 12345
    }
})
                                 //当前页码是第一页，且每页显示15
axios.get('https://cnodejs.org/api/v1/topics?page=1&limit=15', {
   id: 12345  //如果只有一个params,没有其他参数，可以这么简写
})

五、Axios中的post请求

postData(){ //在axios中，post请求接收的参数必须是form.data
   this.$http.post(url,qs.stringify({//所以这里用到 qs插件，用qs.stringify转换即可
        page:1,
        limit:20
   })).then(res =>{
      this.items = res.data.data //此处this指向的不是当前vue实例
      console.log(res)
   })
   .catch(err =>{
        console.log(err)
   })
 }

小总结：POST传递数据有两种格式：

a、form.data ?page=1&limit=48
b、x.www.form.urlencoded { page: 1,limit: 10 }

特别注意：
在axios中，post请求接收的参数必须是formdata ，此时用到qs插件中的qs.stringify转换即可