复习3

vue路由懒加载

1.vue路由懒加载解决的什么 问题：解决打包后文件过大的问题，从而优化页面加载，提升性能

注意：和图片懒加载的区别

2.如何实现vue路由懒加载

const 组件名=()=>import('组件路径')

例如：const Cate=()=>import('@/pages/cate')

3.如何利用webpck中的魔法注释区分不同的组件，将多个组件的js进行分组

const Cate=()=>import(/* webpackChunkName: "a" */ '@/pages/cate')
const Cart=()=>import(/* webpackChunkName: "b" */ '@/pages/cart');
const My=()=>import(/* webpackChunkName: "b" */ '@/pages/my');

vue路由传参：

1.路由传参关键字：
    params(类似于表单中的post提交),
    query(类似于表单中的get提交)


2.路由传参实现步骤：

   第一步：怎么传参

      第一种：通过router-link去传参   

        注：通过router-link可以通过tag=""将默认解析的a标签，换成其他要解析的标签
         <router-link tag="li"></router-link>


          <router-link tag="li" :to="{ name: 'cate', params: { type: 'shuiguo' }}">
                水果
          </router-link>


        <router-link tag="li" :to="{ path: 'cate', query: { type: 'shuiguo' }}">
            水果
        </router-link>




      ????第二种：通过this.$router.push()去传参

        this.$router.push({ name: 'user', params: { userId: '123' }})

        // 带查询参数，变成 /register?plan=private
        this.$router.push({ path: 'register', query: { plan: 'private' }})  



   第二步：怎么接参 

      第一种：this.$route.params

       第一种：this.$route.query

第一种：params

    传参：

        <router-link tag="li" :to="{ name: 'cate', params: { type: 'shuiguo' }}">
            水果
        </router-link>


        this.$router.push({ name: 'user', params: { userId: '123' }})

    接参：
        this.$route.params

第二种：query

传参：
<router-link tag="li" :to="{ path: 'cate', query: { type: 'shuiguo' }}">
水果
</router-link>

   this.$router.push({ path: 'register', query: { plan: 'private' }})  

接参： this.$route.query

vue打包

npm run build
最终打包到dist文件夹下，这个文件夹最终是可以发布到线上