svg学习 路由跳转方式以及传（获取）参 路由获取参数 懒加载

路由跳转方式以及传（获取）参

路由获取参数

        function pag(url) {
   
            //获取路由参数对象
            let obj = {
   }
            let search = location.search.substr(1)//id=1name=rpse&age=18
            //   console.log(search);
            let arr = search.split('&')//[id=1,name=rpse,age=18]
            //   console.log(arr);
            arr.forEach(item => {
   
                let arr2 = item.split('=')//单个数组属性加值[id,1]  [name,rpse] [age,18]
                obj[arr2[0]] = arr2[1]  //{id:1} 
            })
            return obj
        }
        console.log(pag(location.search));
        // 浏览器自带的    不能直接href
        // new   URLSearchParams(location.search.get('age'))//18

懒加载

如何处理 打包出来的项目(首屏)加载过慢的问题

SPA应用: 单页应用程序, 所有的功能, 都在一个页面中, 如果第一次将所有的路由资源, 组件都加载了, 就会很慢!

加载过慢 => 一次性加载了过多的资源, 一次性加载了过大的资源

• 加载过多 => 路由懒加载, 访问到路由, 再加载该路由相关的组件内容
• 加载过大 => 图片压缩, 文件压缩合并处理, 开启gzip压缩等

比如:

路由懒加载

1. 配置异步组件, 路由懒加载

   const login = () => import('../pages/login.vue')
 

2. 图片压缩: 使用 webp 格式的图片, 提升首页加载的速度

3. CDN加速: 配置CDN加速, 加快资源的加载效率 (花钱)

4. 开启 gzip 压缩 (一般默认服务器开启的, 如果没开, 确实可能会很慢, 可以让后台开一下)

   …

图片懒加载是怎么实现的？

就是我们先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。

组件传值

Vue2最常见的11种组件间的通讯方式

1.props  ,  2.$emit / v-on  ,  3. .sync ,4. v-model,5.ref,6.$children /$parent,
7.$attrs/$listeners,8.provide/inject,9.EventBus,10.Vuex,11.$root,12.slot

.sync子组件可以修改父组件内容

Parent.vue:
<template>
    <child :page.sync="page"></child>
</template>
<script>
export default {
   
    data(){
   
        return {
   
            page:1
        }
    }
}

 Child.vue:
export default {
   
    props:["page"],
    computed(){
   
        // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
        currentPage {
   
            get(){
   
                return this.page
            },
            set(newVal){
   
                this.$emit("update:page", newVal)
            }
        }
    }
}
</script>

1. props Vue组件 props

组件是Vue最强大的功能之一；组件化编程，允许我们使用小型，独立，通用的可复用型组件构建大型应用；任何页面都可以抽象为组件树；

//props数据验证

//数据验证的type类型可以是String,Number,Boolean,Object,Array,Function,type也可以是一个自定义的构造器，使用instanceof 检测当prop验证失败的时候，在开发版本下会在控制台抛出一条警告

props