项目中的vue知识点

1.vue-router页面的跳转

在router文件夹下的index.js中：

        import Vue from 'vue'
        import Router from 'vue-router'
        import Home from '@/pages/home/Home'
        import City from '@/pages/city/City'

        Vue.use(Router)
        export default new Router({
            routes:[{
                path:'/',
                name:'Home',
                component:Home
            },{
                path:'/city',
                name:'City',
                component:City
            }]
        })

然后在每个组件里使用<router-link to='所要跳转的路径名字'><router-link>

vue-router的实现原理：

<1>. hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。
类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
   // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

<2>history 模式

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有 popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

function matchAndUpdate () {
   // todo 匹配路径 做 dom 更新操作
}

window.addEventListener('popstate', matchAndUpdate)

2.axios 做前后端数据请求

axios 是通过promise技术对ajax的一种封装。

       import axios from 'axios'
       import CityHeader from './components/Header'
       import CitySearch from './components/Search'
       import CityList from './componets/List'

export default{
       name:'City',
       componets:{
        CityHeader,
        CitySearch,
        CityList
       }
},
data (){
    return {
        cities:{},
        hostCities:[],
        letter:''
    }
   
},
methods:{
    getCityInfo (){
        axios.get('api').then(this.handleGetCityInfoSuccss);
    },
    handleGetCityInfoSuccss (res){
        res=res.data;
        if(res.ret && res.data){
            const data=res.data;
            this.cities=data.cities;
            this.hostCities=data.hostCities;
        }
    }

},
mounted(){//用mounted函数来挂载axios
    this.getHomeInfo();
}

axios的内部实现：


var Axios = {
        get: function(url) {
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    // readyState == 4说明请求已完成
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        // 从服务器获得数据
                        resolve(xhr.responseText)
                    }
                };
                xhr.send();
            })
        },
    }

对于ajax的细节参考https://blog.csdn.net/running_runtu/article/details/80979837