Vue基础知识（下）（未更完）

vue-router

vue-router是路由管理器，那么为什么要使用vue-router呢？
在传统的开发模式中，每一个URL都对应一个HTML文件，当进行页面之间切换的时候，都得重现刷新页面，这样不仅会给服务器压力增大，同时每次刷新都需要重新请求，会影响响应速度，并且会降低用户体验度。

于是诞生了单页面应用SPA（single page applications ），只在页面初始化的时候加载相应的HTML，CSS以及JS文件，一旦页面加载完成，不会应为用户对页面的操作而进行页面的重现加载或者是跳转，而是利用路由机制实现HTML内容之间的变化，避免了页面的重新加载

这样做的可以提高用户体验，避免了不必要的跳转以及重新渲染，减少服务器的压力，前后端职责分离，架构清晰。

安装

使用命令

cnpm install vue-router --save -dev

紧接着在main.js页面中引入Vue-router

import VueRouter from 'vue-router'

使用路由

Vue.use(vueRouter);

配置路由

const router=new vueRouter({
   routes:[
   //里面写整个项目所有的路由配置节点
  { path:"",//路径
   component:""//组件
   }
]
});

配置完成之后关联到Vue

new Vue（{
  el:'#app',
  router,//关联
  render:h=>h(APP)
}）

（但是一般在main.js中写会很乱，一般新建一个router.js文件用于上面的操作）
路由的入口点
在APP.Vue中引入

<router-link></router-link>//解析的时候相当于a链接

router-link。它是个导航器，利用to属性导航到目标组件，并且在渲染的时候会自动生成一个a标签，当然官方也有说明，加个tag标签属性就可以渲染不同的标签，可以浏览器端查看到

路由的出口点

<router-view></router-view>

路由的传值

1：动态路由传值
当我们很多个页面或者组件都要被很多次重复利用的时候，我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据，这时候就要用到动态路由以及路由传参
2：get方式传值

Vue第三方插件 axios cros跨域以及Fetch-jsonp 跨域

1：axios cros跨域

学习网站www.npmjs.com
安装方式：
cnpm install axios --save-dev
两种方式
第一种是get方式请求

 let src = "http://www.maodou.com/data/userinfo.php？id=1&name=maodou";//此处是随便写的链接
     axios
       .get(src)
       .then(res => {
         //success 区域
         console.log(res);
       })
      .catch(err => {
       //错误时代码区域
     })
      .finally(() => {
     // 最后写代码
    /  });

除了这样的写法之外还可以使用es6语法中的async

async function getData() {
     let data = await axios.get("");
     return data;
     }
    getData()
      .then(res => {})
      .catch(err => {});

在使用es6方式的时候可能会报这样一个错regeneratorRuntime is not defined
处理的方式是

1.安装babel支持es6的拓展包
  cnpm install --save-dev babel-polyfill
 2.去配置文件webpack.config.js  写引入
var babelpolyfill = require("babel-polyfill")
 3.直接去main.js里面直接导入
import "babel-polyfill";

post请求

    axios.post("",{
   id:1,
      name:"22"
   }).then((res)=>{}).catch((err)=>{});

2：Fetch-jsonp 跨域

常规写法

let url =
      "http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
 jsonp(url)
 .then(res => {
        return res.json();
      })
     .then(res => {
        console.log(res);
     }).catch((err)=>{
         console.log(err);
      });

async写法

let data = async () => await jsonp(url).then(res => res.json());
    data().then(res => {
      console.log(res);
    });