# Vue2_尚硅谷学习

**Repository Path**: williamsl13/vue-scaffolding-learning

## Basic Information

- **Project Name**: Vue2_尚硅谷学习
- **Description**: 此为尚硅谷Vue2教程自学笔记，请支持正版视频资源
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://www.bilibili.com/video/BV1Zy4y1K7SH?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click
- **GVP Project**: No

## Statistics

- **Stars**: 6
- **Forks**: 6
- **Created**: 2022-04-20
- **Last Updated**: 2024-06-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 笔记

## 关于不同版本的 Vue
    1 vue.js 与 vue.runtime.xxx.js 区别
        1） vue.js 是完整版的 Vue，包含核心功能+模板解析器
        2） vue.runtime.xxx.js 是运行版的 Vue，只包含核心功能，没有模板解析器
    2 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用 template 配置项，需要使用 render 函数
        接收到的 creatElement 函数去指定具体内容
    注意：vue文件的template有package.json的22行


## vue.config.js配置文件
    第一步(仅第一次)，全局安装@vue/cli
        npm install -g @vue/cli
    第二步，切换到需要创建项目的目录，创建项目
        vue create xxx
    第三步，启动项目
        npm run serve
    
    注意，若出现下载缓慢需要
        npm config set registry https://registry.npm.taobao.org
    
        脚手架隐藏了所有 webpack 相关的配置，具体查看
            vue inspect > output.js
            npm vue-cli-serice inspect > output.js
    使用 vue.config.js 可以对脚手架进行个性化定制https://cli.vuejs.org/zh

## 脚手架文件结构
    ├── node_modules
    ├── public
    │ ├── favicon.ico: 页签图标
    │ └── index.html: 主页面
    ├── src
    │ ├── assets: 存放静态资源
    │ │ └── logo.png
    │ │── component: 存放组件
    │ │ └── HelloWorld.vue
    │ │── App.vue: 汇总所有组件
    │ │── main.js: 入口文件
    ├── .gitignore: git 版本管制忽略的配置
    ├── babel.config.js: babel 的配置文件
    ├── package.json: 应用包配置文件
    ├── README.md: 应用描述文件

## ref 属性
    1 被用来给元素或组件注册引用信息（id替代者）
    2 应用在HTML标签上获取真实DOM元素，应用在组件上是组件实例对象vc
    3 使用
        ref="xxx"
        this.$refs.xxx


## 配置项props
    功能：让组件接收外部传入的数据
        1）传递数据
            <demo name="xxx"/>
        2）接收数据
            第一种：只接收
                props:['name']
            第二种：限制类型
                props:{
                    name:String
                }
            第三种：限制类型+限制必要性+指定默认值
                props:{
                    name:{
                        type:String,
                        required:true,
                        default:'老王'
                    }
                }
    备注：props是只读，Vue底层会监视对props的修改，如果对其修改就会发出警告，若业务需求需要修改，赋值props的内容到data函数一份，之后修改data中的数据即可

## mixin（混入）
    功能：可以把多个组件共用的配置取成一个混入对象
    使用方式：
        第一步定义混合，例如:
        {
            data(){....},
            methods:{....}
            ....
        }
        第二步使用混入，例如：
            1）全局混入：
                import {mixin,mixin2} from './mixin'
                Vue.mixin(mixin)
                Vue.mixin(mixin2)
            2）局部混入：
                import { mixin, mixin2 } from "../mixin";
                mixins:[mixin,mixin2]

## 插件
    功能：增强Vue
    本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
    定义插件：
        对象.install=function(Vue,options){
            1 全局过滤器
            2 全局指令
            3 配置全局混入
            4 添加实例方法
        }
    使用插件：Vue.use(插件名,传递的数据)

## scoped样式
    作用：让样式在局部生效，防止不同组件样式名重复导致冲突
    写法：<style scoped lang='css/less'>

## uuid/nanoid
    自定义元素id，不重复

## TodoList总结
    1 组件化编码流程：
        （1）拆分静态组件：组件要按照功能点拆分。命名不要与html元素冲突
        （2）实现动态组件：考虑好数据存放位置，数据是一个组件在用，还是一些组件在用
            1）一个组件在用：放在组件自身即可
            2）一些组件在用：放在他们共同的父组件上（状态提升）
        （3）实现交互：绑定事件开始
    2 props适用于：
        （1）父组件==>子组件通信————数据、对象、函数等
        （2）子组件==>父组件通信（需要父先给子一个函数）
    3 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是只读，不可以修改
    4 props传过来若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做


## webStorage
    1 存储内容一般为5MB左右（不同浏览器可能不一样）
    2 浏览器端通过Window.sessionStorage和Window.localStorage属性实现本地存储机制
    3 相关API
        1.local/sessionStorage.setItem('key','value')
            接收一个键和值作为参数，把键值添加到存储中，若键名存在更新值
        2.local/sessionStorage.getItem('key')
            接收一个键名作为参数，返回对应值
        3.local/sessionStorage.removeItem('key')
            接受一个键名，把该键名从存储删除
        4.local/sessionStorage.clear()
            清空存储所有数据
    4 备注：
        1.sessionStorage存储内容会随着浏览器窗口关闭而消失
        2.localStorage存储内容需要手动清楚才会消失
        3.local/sessionStorage.getItem('key')如果对于value值获取不到，返回null
        4.JSON.parse(null)仍然是null

## 组件自定义事件
    1 组件间通信的方式，适用于————子组件==>父组件
        另一种子==>父，父组件定义methods，props传递
    2 使用场景：A是父组件，B是子组件，B给A传数据，那么就要在A中给B绑定自定义事件（事件回调在A中）
    3 绑定自定义事件：
        1）在父组件中：<Student @azhan="getStudentName" />或<Student v-on:azhan="getStudentName" />
            getStudentName需要在父组件定义methods，子组件用this.$emit("azhan",数据)调用，传入数据
        2）在父组件中：
            <Student ref="student"/>
            mounted(){
                this.$refs.student.$on("azhan", this.getStudentName); 
            }
        注意：一个父组件自定义事件，多个子组件都可以使用
    4 触发自定义事件
        this.$emit("azhan",数据)
    5 解绑：
        this.$off("azhan");
    6 组件绑定原生DOM和ref冲突？使用native修饰
        <StudentInfo ref="student" @click.native="show" />
    7 注意：使用ref绑定自定义事件时，要么配置在methods中，要么使用箭头函数，否则this指向出现问题
            this.$refs.student.$on("azhan", this.getStudentName); // 绑定自定义事件
    // this.$refs.student.$once("azhan", this.getStudentName);  // 绑定自定义事件，一次性
    /* 
        若在上面的函数中写this
              this.$refs.student.$once("azhan", function(name, ...params){
                console.log(this)
              })
            this是student对应的vc
            谁触发的该事件this就是谁
        若写成箭头函数就可以了
              this.$refs.student.$once("azhan", (name, ...params)=>{
                console.log(this)
              })
            this指向App组件实例对象

## 全局事件总线 GlobalEventBus
    1 一种组件间通信的方式，适用于任何组件间通信
    2 安装全局事件总线：
        new Vue({
            el: "#app",
            render: (h) => h(App),
            beforeCreate() {
                // 全局事件总线
                // 安装全局事件总线
                Vue.prototype.$bus = this; 
            },
        });
    3 使用全局事件总线：
        1）提供数据：
            methods: {
                sendStudentName() {
                this.$bus.$emit("hello", 666);
                },
             },
        2）接收数据：A组件想要接收数据，在A组件给$bus绑定自定义事件，事件回调留在A组件自身
            mounted() {
                console.log("School", this);
                this.$bus.$on("hello", (data) => {
                console.log("我是School，已收到数据", data);
                });
            },
    4 最好在beforeDestroy()钩子中，用$off解绑当前组件用到的事件
        beforeDestroy() {
                // 若销毁组件，应该取消绑定的全局自定义事件
                this.$bus.$off("hello");
            },
        注意：父组件与子组件间通信使用自定义事件时，当组件消失，自身vc消失，连带着绑定的事件全部消失，所以不需要设置beforeDestroy()解绑


## 消息订阅与发布（pubsub）
    1 一种组件间通信的方式，适用于任意组件间通信
    2 步骤：
        1）安装pubsub
                npm i pubsub-js
        2）引入
                import pubsub from 'pubsub-js'
        3）接收数据：A组件想接收数据，在A组件订阅消息，订阅的回调留在A组件自身
                mounted() {
                    // 订阅消息
                    this.pubId = pubsub.subscribe("hello", (msgName, data) => {
                    console.log("有人发布了hello消息，回调函数被执行");
                    console.log(msgName); // 即hello
                    // 若用function：this 是undefined
                    // 若用箭头函数：this 是school组件vc
                    console.log(this);
                    });
                },
        4）提供数据
                // 发布消息
                pubsub.publish("hello", 175);
        5）最好在beforeDestroy钩子中，取消订阅
                beforeDestroy() {
                    // 通过订阅id取消订阅
                    pubsub.unsubscribe(this.pubId);
                },


## nextTick
    1 语法：this.$nextTick(回调函数)
    2 作用：在下一次DOM更新结束后执行指定回调
    3 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，需要在nextTick所指定的回调函数执行

## Vue封装的过渡与动画
    1 作用：插入、更新、移除DOM元素时，在合适的时候给元素添加样式类名
    2 图示：

![image-20220425111429895](README.assets/image-20220425111429895.png)

​   
```
3 写法：
    1）准备好样式：
        元素进入样式：
            ——v-enter：进入的起点
            ——v-enter-active：进入过程中
            ——v-enter-to：进入的终点
        元素离开的样式：
            ——v-leave：离开的起点
            ——v-leave-active：离开过程中
            ——v-leave-to：离开的终点
    2）使用<transition>包裹要过渡的元素，并配置name属性
            <transition name="hello" appear>
                <h1 v-show="isShow">你好，我是阿占</h1>
            </transition>
    3）备注：若有多个元素需要过渡，需要使用<transition-group>，且每个元素指定key值
```

## 配置代理
        同源策略：
              协议名、主机名、端口号

          跨域：
              1 cors
              2 jsonp ———— script src只能解决get请求，不能解决post等请求
              3 代理服务器
                  1）nginx
                  2）Vue-cli
                      ————只能配置一个代理
                      devServer: {
                        proxy: "http://localhost:3000",
                      },

## 发送Ajax请求：
    1 xhr   ————最原始
    2 jQuery————封装
    3 axios
    4 fetch ————和xhr平级
    5 vue-resource ————对xhr的封装
            相较于axios，维护不频繁，更推荐axios


## 插槽
    1 作用：父组件向子组件指定位置插入html结构，是一种组件间通信方式
        ————适用于：父组件==>子组件
    2 分类：默认插槽、具名插槽、作用域插槽
    3 使用方式：
        1）默认插槽：
            父组件：
                <CategoryVue title="游戏">
                    <div>HTML结构</div>
                </CategoryVue>
            子组件：
                <template>
                    <div class="category">
                        <h3>{{ title }}分类</h3>
                        <slot>我是默认值，使用者没有传递内容时，我将会显示</slot>
                    </div>
                </template>
        2）具名插槽：
            父组件：
                <CategoryVue title="美食">
                    <template slot="center">
                        <div>HTML结构</div>
                    </template>
                    <template slot="footer">
                        <div>HTML结构</div>
                    </template>
                </CategoryVue>
            子组件：
                <template>
                    <div class="category">
                        <slot name="center">我是中间插槽</slot>
                        <slot name="footer">我是底部插槽</slot>
                    </div>
                </template>
        3）作用域插槽：
            a 理解：数据在组件自身（子组件），根据数据生成结构需要使用者（父组件）决定
            b 代码：
                父组件：
                    <CategoryVue>
                        <template scope="scopeData">
                            <ul>
                                 <li v-for="(g, index) in scopeData.games" :key="index">{{ g }}                      
                                 </li>
                            </ul>
                        </template>
                    </CategoryVue>
                子组件：
                    <template>
                        <div">
                            <slot :games="games" msg="你好啊我是插槽传递数据"></slot>
                        </div>
                    </template>
                    <script>
                        export default {
                        name: "CategoryVue",
                        props: ["title"],
                        data() {
                            return {
                            games: ["LOL", "CF", "PUBG", "王者荣耀"],
                         };
                         },
                        };
                    </script>

## Vuex
    1 概念：
        在Vue实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写）,也是一种组件间通信的方式，且适用于任何组件间通信
    2 何时使用：
        多个组件需要共享数据时
    3 搭建Vuex环境
        1）创建文件：src/store/index.js
            // 引入Vue
            import Vue from 'vue';
            // 引入vuex
            import Vuex from "vuex";
            // 应用Vuex
            Vue.use(Vuex);

            // 准备 actions ————用于响应组件中的动作
            const actions = {};
            // 准备 mutations ————用于操作数据          （state）
            const mutations = {};
            // 准备 state ————用于存储数据
            const state = {};

            // 创建store并暴露store/导出
            export default new Vuex.Store({
            actions,
            mutations,
            state,
            });
        2）在main.js创建vm时传入store配置项
            // 引入store
            import store from "./store";
            new Vue({
            el: "#app",
            render: (h) => h(App),
            // 配置store
            store,
            });
    4 基本使用：
        1）初始化数据state，配置actions、配置mutations，操作文件store.js
        2）组件中读取vuex数据：
            this.$store.state.sum
        3）组件修改vuex数据：
            this.$store.dispatch('actions的方法名',数据)
            this.$store.commit('mutations的方法名',数据)
        备注：若没有网络请求或其他业务逻辑，组件也可以越过actions，不写dispatch，直接写commit
    5 getters使用：
        1）当state的数据需要加工后再使用时，且需要多组件复用，可以使用getters加工
        2）在store.js追加getters配置
            const getters = {
            bigSum(state) {
                return state.sum * 10;
                },
            };
            export default new Vuex.Store({
            actions,
            mutations,
            state,
            getters
            });
        3）组件读取数据：
            this.$store.getters.bigSum

## 四个map方法使用
    1 mapState，映射this.$store.state的数据为计算属性
        computed: {
            // 借助mapState生成计算属性,从state映射数       据（对象写法）
            ...mapState({ he: "sum", xuexiao:        "school", xueke: "subject" }),

            // 数组写法，生成的计算属性名和读取出的名       要一致
            ...mapState(["sum", "school",       "subject"]),
        },
    2 mapGetters，映射this.$store.getters数据为计算属性
        computed: {
            // 借助mapGetters生成计算属性，从getters        读取数据，对象、数组写法
            ...mapGetters({ bigSum: "bigSum" }),
            ...mapGetters(["bigSum"]),
        },
    3 mapActions，生成actions对话，包含$store.dispatch(xxx)的数据
        methods:{
            // 借助mapActions生成对应方法，方法会调用dispatch联系actions
            ...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
            ...mapActions(["jiaOdd", "jiaWait"]),
        }
    4 mapMutations，生成与mutations对话的方法，包含$store.commit(xxx)数据
        methods:{
            // 借助mapMutations生成对应方法，方法会调用commit联系mutations
            ...mapMutations({ increment: "JIA", decrement: "JIAN" }),
            ...mapMutations(["JIA", "JIAN"]),
        }
    注意：mapActions和mapMutations需要穿参数，在模板绑定事件时传参，否则参数是事件对象（鼠标点击等）


## 模块化+命名空间
    1 目的：让代码更好维护，多种数据分类更加明确
    2 修改store.js
        // 求和功能相关配置
        export default {
        // true会被mapState('countOptions',['JIA])识别
        namespaced: true,
        actions: {
            jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit("JIA", value);
            }
            },
            jiaWait(context, value) {
            setTimeout(() => {
                context.commit("JIA", value);
            }, 500);
            },
        },
        mutations: {
            JIA(state, value) {
            state.sum += value;
            },
            JIAN(state, value) {
            state.sum -= value;
            },
        },
        state: {
            sum: 0,
            school: "石大",
            subject: "前端",
        },
        getters: {
            bigSum(state) {
            return state.sum * 10;
            },
        },
        };
    3 开启命名空间后，组件读取state数据
        ...mapState("countAbout", ["sum", "school", "subject"], "personAbout", [
        "personList",
        ]),
        或
        sum() {
        return this.$store.state.countAbout.sum;
        },
    4 开启命名空间后，组件读取getter数据
        return this.$store.getters["personAbout/firstPersonName"];
        或
        ...mapGetters("countAbout", ["bigSum"]),
    5 开启命名空间后，组件调用 dispatch
        this.$store.dispatch("personAbout/addPersonWang", personObj);
        或
        ...mapActions("countAbout", {
        incrementOdd: "jiaOdd",
        incrementWait: "jiaWait",
        }),
    6 开启命名空间后，组件调用commit
        this.$store.commit("personAbout/ADD_PERSON", personObj);
        或
        ...mapMutations("countAbout", { increment: "JIA", decrement: "JIAN" }),
        

##  路由
    1 SPA应用
        single page web application
        单页web应用
        整个应用只有一个完整页面
        不刷新页面，局部更新
        数据通过ajax请求获取
    2 路由：
        一个路由就是一组映射关系：key-value
            key为路径，value可能是function或component
        1）后端路由：
            value是function，处理客户端请求
            服务器接收请求，根据请求路径找到匹配函数处理请求，返回响应数据
        2）前端路由
            value是component，展示页面内容
            浏览器路径改变时，对应组件显示
    3 使用
        1）安装vue-router
            npm i vue-router
        2）应用插件
            Vue.use(VueRouter)
        3）编写router配置项
            // 引入VueRouter
            import VueRouter from "vue-router";
            // 引入待路由的组件
            import AboutVue from "../components/AboutVue.vue";
            import HomeVue from "../components/HomeVue.vue";

            // 创建并暴露一个路由器
            export default new VueRouter({
            routes: [
                {
                path: "/about",
                component: AboutVue,
                },
                {
                path: "/home",
                component: HomeVue,
                },
            ],
            });
        4）实现切换
            <router-link active-class="active" to="/about">Aboout</router-link>
        5）指定展示位置
            <router-view></router-view>
    4 注意
        1）路由组件通常存放在pages文件夹，一般组件存放在components文件夹
        2）通过切换，隐藏的路由组件，默认是销毁的，需要的时候再挂载
        3）每个组件都有自己的$route属性，存储自己的路由信息
        4）整个应用只有一个router，通过组件的$route属性获取到

## 多级路由
    1 配置路由规则，使用children配置项：
          routes: [
            // 一级路由
            {
            path: "/about",
            component: AboutVue,
            },
            {
            path: "/home",
            component: HomeVue,
            children: [
                {
                path: "news",
                component: NewsVue,
                },
                {
                path: "message",
                component: MessageVue,
                },
            ],
            },
        ],
    2 跳转（完整路径）：
        <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>

## 路由的query参数
    1 传递参数
        字符串写法：
        <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{
          m.title
        }}</router-link>

        对象写法：
        <router-link
          :to="{
            path: '/home/message/detail',
            query: {
              id: m.id,
              title: m.title,
            },
          }"
        >
          {{ m.title }}
        </router-link>
    2 接收参数：
        $route.query.id
        $route.query.title


## 命名路由
    1 作用：简化路由跳转
    2 如何使用：
        1）给路由命名：
            export default new VueRouter({
            routes: [
                // 一级路由
                {
                name: "guanyu",
                path: "/about",
                component: AboutVue,
                },
                {
                path: "/home",
                component: HomeVue,
                children: [
                    {
                    path: "news",
                    component: NewsVue,
                    },
                    {
                    path: "message",
                    component: MessageVue,
                    children: [
                        {
                        name: "xiangqing",
                        path: "detail",
                        component: DetailVue,
                        },
                    ],
                    },
                ],
                },
            ],
            });
        2）简化跳转：
            简化前：
                <router-link
                :to="/demo/test/welcome">
                跳转
                </router-link>
            简化后：
                <router-link
                :to="{name:'hello'}">
                跳转
                </router-link>
            简化+传参：
                <router-link
                :to="{
                    name: 'xiangqing',
                    query: {
                    id: m.id,
                    title: m.title,
                    },
                }"
                >
                {{ m.title }}
                </router-link>

## 路由的params参数
    1 配置路由，声明接收params参数
            {
            path: "/home",
            component: HomeVue,
            children: [
                {
                path: "news",
                component: NewsVue,
                },
                {
                path: "message",
                component: MessageVue,
                children: [
                    {
                    path: "detail/:id/:title",
                    component: DetailVue,
                    },
                ],
                },
            ],
            },
    2 传递参数
        跳转携带params参数，to的字符串写法
            <router-link :to="`/home/message/detail/${m.id}/${m.title}`">{{
            m.title
            }}</router-link>

        跳转携带params参数，to的对象写法
            <router-link
            :to="{
                name: 'xiangqing',
                params: {
                id: m.id,
                title: m.title,
                },
            }"
            >
            {{ m.title }}
            </router-link>
        注意：路由携带参数params时，若使用to的对象写法，不能使用path配置，必须使用name配置
    3 接收参数
        <ul>
            <li>消息编号{{$route.params.id}}</li>
            <li>消息标题{{$route.params.title}}</li>
        </ul>

## 路由的props配置
    作用：让路由组件更方便的收到参数
        {
        name: "xiangqing",
        path: "detail",
        component: DetailVue,

        // props第一种写法————对象
        // 该对象所有key-value会以props形式DetailVue组件
        // props:{a:1,b:'helloworld'}

        // props第二种写法———布尔值
        // 若为真，该路由组件收到所有params参数，以props形式传给DetailVue组件
        // props: true,

        // props第三种写法————函数
        // 需要设置query传参
        props($route) {
            return { id: $routquery.id, title: $route.query.title;
        },
        // 或者解构赋值
        // props({ query }) {
        //   return { id: query// },
        // },
        },

## <router-link>的replace属性
    1 作用：控制路由跳转时操作浏览器历史记录的模式
    2 浏览器历史记录有两种写入方式：
        push模式————追加历史记录
            前进后退。默认push模式
        replace模式————替换当前历史记录
            在router-link标签内追加 replace
            或:replace='true'

## 编程式路由导航
    1 作用：不借助<router-link>实现路由跳转，让路由跳转更灵活
    2 编码：
        this.$router.push({
            name:'xiangqing',
            params:{
                id:xxx,
                title:xxx
            }
        })

        this.$router.replace({
            name:'xiangqing',
            params:{
                id:xxx,
                title:xxx
            }
        })

        this.$router.forward(); // 前进
        this.$router.back();    // 后退
        this.$router.go(-1);    // 可前可后

## 缓存路由组件
    1 作用：让不显示的路由组件保持挂载，不被销毁
    2 编码：
        <keep-alive include="NewsVue">
            <!-- 
            此处填组件名
                vue文件export default{}内部定义的name
            -->
            <router-view></router-view>
        </keep-alive>
    注意：
        1）需要在保持不被销毁的父组件外侧使用keep-alive
        2）若多个
            <keep-alive :include=["NewsVue",'others']>

## 两个新的生命周期钩子
    1 作用：路由组件独有的两个钩子，用于捕获路由组件的激活状态
    2 具体名字：
        1）activated路由组件被激活时触发
        2）deactivated路由组件失活时触发

## 路由守卫
    1 作用：对路由权限进行权限控制
    2 分类：全局守卫、独享守卫、组件内守卫
    3 全局守卫：
        // 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
        router.beforeEach((to, from, next) => {
        // if (to.path === "/home/news" || to.path === "/home/message") {
        // 是否需要权限校验
        if (to.meta.isAuth) {
            if (localStorage.getItem("school") === "石大") {
            next();
            } else {
            alert("学校名字不对");
            }
        } else {
            next();
        }
        });

        // 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
        router.afterEach((to, from) => {
        console.log(to, from);
        document.title = to.meta.title || "自定义系统";
        });
    4 独享守卫：
        beforeEnter: (to, from, next) => {
            console.log(from);
            if (to.meta.isAuth) {
              if (localStorage.getItem("school") === "石大") {
                next();
              } else {
                alert("学校名字不对");
              }
            } else {
              next();
            }
        },
    5 组件内守卫
        // 通过 路由规则 ，进入该组件时被调用
        beforeRouteEnter(to, from, next) {
            if (to.meta.isAuth) {
            if (localStorage.getItem("school") === "石大") {
                next();
            } else {
                alert("学校名字不对");
            }
            } else {
            next();
            }
        },

        // 通过 路由规则 ，离开该组件时被调用
        // 若不设置next，不会离开该组件
        beforeRouteLeave(to, from, next) {
            next();
        },

## 路由器两种工作模式
    1 对于一个url说，什么是hash值————#及其后面的内容就是hash值
    2 hash值不会包含在http请求中，及hash值不会带给服务器
    3 hash模式
        1）地址永远带#，不美观
        2）若以后地址通过第三方手机app分享，若app校验严格，地址会被标注不合法
        3）兼容性较好
    4 history模式
        1）地址干净、美观
        2）兼容性相较hash略差
        3）应用部署上线时需要后端人员支持，解决页面刷新服务端404的问题


## Vue UI组件库
    1 移动端UI组件库
        1） Vant        https://youzan.github.io/vant
        2） Cube UI     https://didi.github.io/cube-uiu
        3） Mint UI     http://mint-ui.github.io 
    2 PC端常用UI组件库
        1） ElementUI   https://element.eleme.cn
        2） IViewUI     https://www.iviewui.com

    3 ElementUI