欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

项目中的vue知识点

程序员文章站 2022-07-03 16:10:26
...

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