Web前端Vue基础

我不是女神ヾ 2022-12-30 07:47 241阅读 0赞

### Vue笔记目录 ###

*  Vue 笔记
 *   *  一、Vue的基本模板语法
     *   *  1.1插值操作
         *  1.2插值操作中有关其他指令的使用
         *  1.3动态绑定的指令
         *  1.4计算属性
         *  1.5事件监听
         *  1.6条件判断
         *  1.7循环遍历
         *  1.8表单绑定v-model（双向绑定）
     *  二、组件化开发
     *   *  2.1注册组件的基本步骤
         *  2.2组件模板的分离写法
         *  2.3组件数据的保存
         *  2.4父子组件的通信
         *  2.5父子组件的访问方式
         *  3.6插槽slot
     *  三、Vue-CLI
     *  三、Vue-router
     *   *  3.1 Vue-router的基础
         *  3.2路由懒加载
         *  3.3 keep-alive与vue-router

# Vue 笔记 #

## 一、Vue的基本模板语法 ##

### 1.1插值操作 ###

### 1.2插值操作中有关其他指令的使用 ###

*  v-once 指令
    
    语法：直接v-once 当给某个元素增加了这个指令后，该元素只会在最开始的时候显示对应的值，如果对其进行修改，则加入了这个指令的元素不会被修改。
 *  v-html
    
    语法：v-html=‘变量名’ 如果想要将一个元素解析成html格式在网页中呈现出来，就要在该元素上增加该指令。
 *  v-text
    
    语法：v-text=‘变量名’ 该指令会将标签内原有的数据进行覆盖，无法拼接
 *  v-pre
    
    语法：v-pre 该指令不会解析标签里边的内容，反而会将标签里边的内容原封不动的展示出来，
 *  v-cloak
    
    语法：v-cloak 该指令用于解析完js代码后才将渲染效果展示出来;在vue解析之前，div中有一个属性v-cloak;在vue解析之后，div中就没有属性v-cloak,给这个属性添加一个display:none；可以让用户看不见渲染过程。

### 1.3动态绑定的指令 ###

*  v-bind
    
    语法：v-bind:属性名 该指令用于动态绑定某个元素的属性，简写方式：直接在要绑定的属性名前加上: 。比如动态绑定a标签的href属性，动态绑定img的src属性。
    
     *  v-bind动态绑定class类（对象语法）
        
        语法：
        
            <div id="app" v-bind:class="{要起的类名1:布尔值,要起的类名2:布尔值}">
        
        这的布尔值，是要在Vue中，data属性事先定义好的。
     *  v-bind数组语法
        
        语法：
        
            <h1 v-bind:class="['active','line']">{ { message}}</h1>
     *  v-bind动态绑定style
        
        对象语法:
        
            v-bind:style="{属性名:属性值,属性名:属性值}"
        
        **注：当属性值直接写值时，只需要加引号；如果要用data中的数据时，则值不需要加引号，但是data中的数值需要加引号**
        
        数组语法：
        
            v-bind:style="[data中的属性名,data中的属性名]"
        
            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                <div id="app">
                    <h1 :style="[baseStyle1,baseStyle2]">{ { message}}</h1>
                </div>
                <script>
                    const app = new Vue({ 
                        el:'#app',
                        data:{ 
                            message:"你好啊",
                            baseStyle1:{ backgroundColor:"red"},
                            baseStyle2:{ fontSize:"40px"}
                        }
                    })

### 1.4计算属性 ###

在Vue中，data对象中含有一个computed属性，该属性为计算属性，使用该属性时，直接调用属性名（无需加括号，因为是一个计算属性）。

*  计算属性的复杂操作
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <div id="app">
                <h1>{ { message}}{ { totalPrice}}</h1>
            </div>
            <script>
                const app = new Vue({ 
                    el: '#app',
                    data: { 
                        message: "总价格为：",
                        books: [
                            {  id: 1, name: '三国演义', price: 100 },
                            {  id: 2, name: '西游记', price: 100 },
                            {  id: 3, name: '水浒传', price: 100 },
                            {  id: 4, name: '红楼梦', price: 100 }
                        ]
                    },
                    computed: { 
                        totalPrice:function(){ 
                            let sum=0
                            for(let i=0;i<this.books.length;i++){ 
                                sum+=this.books[i].price
                            }
                            return sum
                        }
                    }
                })

### 1.5事件监听 ###

*  在Vue中使用v-on来完成事件的监听，语法：v-on:事件名称=“调用的函数”
    
        <button v-on:click="add()">+</button>
        
        简写语法：
        <button @click="add">+</button>
 *  v-on的参数问题
    
    当通过methods中定义方法，以提供@click调用时，需要注意参数问题：
    
    1.如果该方法不需要提供额外的参数，那么方法后面的（）可以不添加；
    
    但是：如果方法本身有一个参数，你又给（）省略的话，此时Vue会默认将浏览器生产的event事件作为参数传递到方法中
    
    2.如果方法需要传入一个参数，同时也需要传递event事件，可以通过==$event==的方式来手动获取浏览器参数的event对象。
 *  v-on修饰符
    
    Vue提供了修饰符来进行处理一些事件：
    
     *  .stop 停止事件的冒泡
     *  .prevent 阻止浏览器的默认行为
     *  .keyCode 只当事件是从特定键触发时才触发的回调 语法:@事件名.按键名=“方法名”
     *  .native 监听组件根元素的原生事件
     *  .once 使某个事件只发生一次回调

### 1.6条件判断 ###

*  v-if、v-else-if、v-else
    
    Vue中的条件指令可以根据表达式的值在DOM中渲染或者销毁元素或组件
    
     *  v-if的原理：当v-if后面的条件为false时，对应的元素以及子元素不会被渲染；也就是根本不会有对应的标签被渲染
 *  v-if与v-show的区别使用
    
    v-if：当条件为false时，包含v-if指令的元素，根本就不会存在dom中
    
    v-show：当条件为false时，v-show只是给元素添加了一个行内样式 dispaly:none
    
    \*\*使用场景：\*\*当显示与隐藏很频繁时，使用v-show，当只有一次切换时使用v-if

### 1.7循环遍历 ###

*  使用v-for来进行循环遍历,遍历数组
    
        
            <ul>
              <li v-for="item in games" :key="item">{ { item}}</li>
            </ul>
        
            
            <ul>
              <li v-for="(item,index) in games">{ { index +" "+ item}}</li>
            </ul>
          </div>
 *  使用v-for来遍历对象
    
        
            <ul>
              <li v-for="item in people" :key="item">{ { item}}</li>
            </ul>
        
            
            <ul>
              <li v-for="(value,key) in people">{ { value}}+{ { key}}</li>
            </ul>
        
            
            <ul>
              <li v-for="(value,key,index) in people">{ { value}}+{ { key}}+{ { index}}</li>
            </ul>
    
    **在v-for里边加上 ==:key=“item”==可以提高性能**
 *  数组中哪些方法是响应式（当数组内部数据改变，页面上的元素也会随之改变）
    
     *  push() 往数组的末尾添加一个或者多个元素
     *  pop() 删除数组中的最后一个元素
     *  shift() 删除数组中的第一个元素
     *  unshift() 在数组最前面添加一个或多个元素
     *  splice() 作用：删除元素/插入元素/替换元素
        
         *  删除元素：第一个参数代表起始位置，第二个参数代表要删除元素的个数(如果第二个参数不传，默认删除后面所有元素，包含起始值)
         *  插入元素：第二个参数，传入0，后面跟上要插入的元素
         *  替换元素：第二个参数，表示要替换几个元素，后面的元素用来替换前面的元素
     *  sort() 对数组中元素进行排序
     *  reverse() 对数组中的元素进行反转
     *  Vue.set()方法 三个参数，（要修改的对象，索引值，修改后的值）
    
    **注意：通过索引修改数组中的元素不是响应式的**

### 1.8表单绑定v-model（双向绑定） ###

*  语法：v-model=“data中的属性名”
 *  实现原理
    
    v-model的实现原理实际上进行了两个操作
    
    1.v-bind绑定一个value属性
    
    2.v-on 指令绑定给当前元素一个input事件
 *  v-model与radio的结合使用
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <div id="app">
            <label for="man">
              <input type="radio" name="man" value="男" v-model="sex">男
            </label>
        
            <label for="woman">
              <input type="radio" name="woman" value="女" v-model="sex">女
            </label>
            <h1>您选择的性别是：{ { sex}}</h1>
          </div>
          <script>
            const app = new Vue({ 
              el: '#app',
              data: { 
                message: '你好啊',
                sex:''
              }
            })
          </script>
 *  v-model与checkbox的结合使用
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <div id="app">
            
            <label for="agree">
              <input type="checkbox" name="agree" v-model="isAgree">同意
            </label><br>
            <button :disabled="!isAgree">下一步</button>
        
            <br>
        
            
            <input type="checkbox" value="鱼香肉丝" v-model="foods">鱼香肉丝
            <input type="checkbox" value="过油肉" v-model="foods">过油肉
            <input type="checkbox" value="红烧肉" v-model="foods">红烧肉
            <input type="checkbox" value="酱猪蹄" v-model="foods">酱猪蹄
            <h1>您要选择的食物是：{ { foods}}</h1>
          </div>
          <script>
            const app = new Vue({ 
              el:"#app",
              data:{ 
                message:"你好啊",
                isAgree:false, //单选返回布尔值
                foods:[]  //多选返回数组
              }
            })
          </script>
 *  v-model与select的结合使用
    
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <div id="app">
            
            <select name="fruit" v-model="fruit">
              <option value="青瓜" >青瓜</option>
              <option value="苦瓜" >苦瓜</option>
              <option value="香瓜" >香瓜</option>
              <option value="甜瓜" >甜瓜</option>
            </select>
            <h1>您选择的水果是：{ { fruit}}</h1>
        
            <br>
        
            <select name="foods" v-model="foods" multiple>
              <option value="鱼香肉丝">鱼香肉丝</option>
              <option value="葱爆肉">葱爆肉</option>
              <option value="过桥米线">过桥米线</option>
              <option value="红烧茄子">红烧茄子</option>
            </select>
            <h1>您选择的食物是：{ { foods}}</h1>
          </div>
          <script>
            const app = new Vue({ 
              el:'#app',
              data:{ 
                fruit:'甜瓜', //单选返回字符串
                foods:[]  //多选返回数组
              }
            })
          </script>
 *  v-model的修饰符
    
    语法：v-model.修饰符名=“data中的属性名”
    
     *  lazy修饰符
        
        lazy修饰符可以让数据在市区焦点或者按回车时才会更新
     *  number修饰符
        
        number修饰符可以让输入框中的内容自动转换成数字类型
     *  trim修饰符
        
        trim修饰符可以过滤掉内容左右两边的空格

## 二、组件化开发 ##

### 2.1注册组件的基本步骤 ###

1.  创建组件构造器，调用Vue.extend()方法，里边传入template代表的是要进行组件的 **模板对象**
    
    该模板就是在使用到组件的地方，要显示HTML代码
2.  注册组件，调用Vue.component()方法，里边有两个参数 **(“要用的模板标签名”,组件构造器对象)**
3.  使用组件，在Vue实例的作用范围内使用组件

*  全局组件与局部组件
    
    使用==Vue.component(“my-cpn”,cpnC)==这种方式注册的组件是全局组件，
    
    在Vue的实例对象中component属性中注册的组件属于局部组件，局部组件只能在Vue的实例对象中使用，超出该Vue的实例对象外，浏览器不会对其进行解析。

基本使用：

<div id="app">
        
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
        <my-cpn></my-cpn>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        // 1.创建组件构造器对象
        const cpnC = Vue.extend({ 
          template:` <div> <h1>我是标题</h1> <p>我是第一个p标签的内容</p> <p>我是第二个p标签的内容</p> </div>`
        })
        // 2.注册组件
        Vue.component("my-cpn",cpnC)	//全局组件
    
        const app = new Vue({ 
          el: '#app',
          data: { 
          },
          //局部组件(只能在当前Vue的实例对象下使用)
          /* components:{ //cpn是使用时的标签名 cpn:cpnC }*/
        })
      </script>

*  **注册组件的语法糖格式**

<div id="app">
        <cpn></cpn>
        <cpn2></cpn2>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <script>
        // 1.创建组件构造器
        // const cpnC = Vue.extend()
    
        // 全局组件语法糖的创建方式
        Vue.component('cpn', { 
          template: ` <div> <h1>AAAA</h1> <P>111111</P> </div> `
        })
    
        // 局部组件语法糖的创建方式
        const app = new Vue({ 
          el: '#app',
          components: { 
            cpn2: { 
              template: ` <div> <h1>BBBB</h1> <P>2222</P> </div> `
            }
          }
        })
      </script>

### 2.2组件模板的分离写法 ###

1.  使用script标签，type类型为text/x-template，在该标签放模板，且给该标签设置一个id，与template中的id名对应
2.  使用template标签，在该标签中放置模板，且给该标签设置一个id，与template中的id名对应

<div id="app">
        <cpn></cpn>
      </div>
    
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      
        
    
        
        <template id="cpn">
          <div>
            <h1>我是第二个</h1>
            <p>我是第二个内容</p>
          </div>
        </template>
    
      <script>
        // 1.注册一个全局组件
        Vue.component('cpn',{ 
          template:'#cpn'
        })
    
        const app = new Vue({ 
          el:'#app'
        })
      </script>

### 2.3组件数据的保存 ###

*  组件对象也有一个data属性(与Vue实例对象类似，也可以有methods等属性),**但是**这个data必须是一个函数，而且该函数返回一个对象，返回对象的内部存放着需要保存的数据。

<div id="app">
        <cpn></cpn>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      <template id="cpn">
        <div>
          <h1>我是第二个</h1>
          <p>我是第二个内容</p>
          <p>{ { name}}</p>
        </div>
      </template>
    
      <script>
        // 1.注册一个全局组件
        Vue.component('cpn', { 
          template: '#cpn',
          data() { 
            return { 
              name: "我是数据，存储在返回对象中"
            }
          }
        })
    
        const app = new Vue({ 
          el: '#app'
        })
      </script>

### 2.4父子组件的通信 ###

1.  通过props向子组件传递数据
2.  通过 $emit 自定义事件向父组件发送消息

*  在组件中，使用props来声明需要从父级接收到的数据。
    
    props的值有两种方式：
    
     *  字符串数组，数组中的字符串就是传递时的名称
     *  对象，对象可以设置传递时的类型，也可以设置默认值等，（在属性名的后面跟上要返回的类型）
    
        <div id="app">
            
            <cpn v-bind:childfoods="foods" :childmessage="message"></cpn>
          </div>
        
          
          <template id="cpn">
            <div>
              <h1>{ { childmessage}}</h1>
              
              <h1>{ { childfoods}}</h2>
              <ul>
                <li v-for="item in childfoods">{ { item}}</li>
              </ul>
            </div>
          </template>
        
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script>
            // 注册组件
            const cpn = { 
              template:'#cpn',
              // 父传子，使用props
              
              // 1.使用数组类型
              // props:['childfoods','childmessage']
              
              // 2.使用对象类型，可以完成类型限制
              props:{ 
                // 传入属性，可以设置其类型
                // childfoods:Array,
                // childmessage:String
        
                // 提供一些默认值（默认值在没有传的情况下显示）default
                // require 当添加了require，值为true时，该变量必须传递
                childmessage:{ 
                  type:String,
                  default:'我是默认值类型',
                  require:true
                },
                childfoods:{ 
                  type:Array,
                  // 类型是对象或者数组时，默认值必须是一个函数
                  // default(){ return {} }
                  default:['我是默认数组1','我是默认数组2'],
                  require:true
                }
              }
            }
        
            const app = new Vue({ 
              el:'#app',
              data:{ 
                message:"我是父组件中的元素",
                foods:['鱼香肉丝','蛋炒饭','尖椒肉丝']
              },
              components:{ 
                cpn
              }
            })
          </script>
 *  组件通信-父传子（props中的驼峰命名标识）
    
    组件通信，父传子的驼峰命名中，如果在子组件中定义的属性是以驼峰命名法定义的，那么在父组件当中就应该用 \- 来代替每一个驼峰
    
        <div id="app">
            <cpn :child-message="message" :child-person="person"></cpn>
          </div>
        
          <template id="cpn">
            <div>
              <h1>{ { childMessage}}</h1>
              <h1>{ { childPerson}}</h1>
            </div>
          </template>
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script>
            // 注册组件
            const cpn = { 
              template:'#cpn',
              props:{ 
                childMessage:{ 
                  type:String,
                  default:''
                },
                childPerson:{ 
                  type:Object,
                  default(){ 
                    return { }
                  }
                }
              }
            }
        
            const app = new Vue({ 
              el:'#app',
              components:{ 
                cpn
              },
              data:{ 
                message:'你好啊',
                person:{ 
                  name:'张三',
                  age:18,
                  hobby:['lol','吃鸡']
                }
              }
            })
          </script>
 *  子传父（自定义事件）
    
    当子组件需要向父组件传递数据时，就要用到自定义事件，用v-on也可以监听自定义事件。
    
    自定义事件的流程：
    
    1.  在子组件中，通过 $emit() 来触发事件
    2.  在父组件中，通过v-on来监听子组件事件
    
        
          <div id="app">
            <cpn @item-click="cpnClick"></cpn>
          </div>
        
          
          <template id="cpn">
            <div>
              <button v-for="item in categories"
                      @click="btnClick(item)">
                { { item.name}}
              </button>
            </div>
          </template>
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script>
            //子组件 
            const cpn = { 
              template:'#cpn',
              data(){ 
                return { 
                  categories:[
                    { id:1,name:'热门推荐'},
                    { id:2,name:'手机数码'},
                    { id:3,name:'家用家电'},
                    { id:4,name:'电脑办公'}
                  ]
                }
              },
              methods:{ 
                btnClick(item){ 
                  // 发射事件 自定义事件
                  this.$emit("item-click",item)
                }
              }
            }
        
            // 父组件
            const app = new Vue({ 
              el:'#app',
              // 注册子组件
              components:{ 
                cpn
              },
              methods:{ 
                cpnClick(item){ 
                  console.log('cpnClick',item)
                }
              }
            })
          </script>
    
    **个人总结：**
    
    **父传子，需要在子组件中用props来声明出新的属性名来接收父组件中的内容；之后在父模板中使用v-bind将父组件中的内容赋给子组件，然后子组件模板直接展示自己内部的属性即可**
    
    **子传父，需要在子组件中用 $emit()来发射一个自定义事件 给父组件；在子组件模板中直接展示自己内部的属性即可；之后在父组件模板中使用v-on来监听自定义事件，并将父组件中的内容赋值给该自定义事件**

### 2.5父子组件的访问方式 ###

*  父组件访问子组件：使用  c h i l d r e n = = 或 者 = = children== 或者== children==或者==refs
    
    this.$children是一个数组类型，包含所有子组件对象
    
    $refs是一个对象类型，默认是一个空对象；使用时在组件上给 ref赋值 例如:`<cpn ref="aaa"></cpn>`
 *  子组件访问父组件：使用  p a r e n t = = , 使 用 = = parent== ,使用 == parent==,使用==root 来访问组件的根组件

### 3.6插槽slot ###

**组件的插槽：**

组件的插槽可以使封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底展示什么。

*  基本使用方式：在组件模板中使用`<slot></slot>`标签来占据空位。如果在该标签内部填入相应的html代码，则会在网页中显示插槽的默认内容，如果不想显示默认内容，直接在组件写入其他元素，会将默认的样式全部覆盖。
 *  具名插槽：给相应的插槽添加一个`name`属性，在要显示的元素标签内部添加一个`slot`属性，想要替换哪个插槽，就将相应的name值赋值给slot。
 *  编译作用域的概念
    
    编译作用域指的是在哪一个组件模板下，寻找到的只能是当前组件作用域的属性，父组件不能够跨到子组件，子组件也不可能跨越到父组件。父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

**作用域插槽的使用（在父组件中拿子组件的数据）**

*  一句话总结：父组件替换插槽的标签，但是内容由子组件来提供。父组件对子组件所展示的内容不满意，想要换一种展示方式，就用作用域插槽。（内容在子组件，希望父组件来告诉我们，使用slot作用域插槽就可以了）
 *  使用方式：
    
    在子组件中的slot中这样写`<slot :data="languages"></slot>`，然后在父组件中的`<cpn></cpn>`中，写上template
    
    这样写`<template slot-scope="slot"></template>`，在template内部写上要呈现出的效果内容。
    
        <div id="app">
            <cpn></cpn>
            <cpn>
              
              <template slot-scope="slot">
                <span>{ { slot.data.join(' - ')}}</span>
              </template>
            </cpn>
        
            <cpn>
              
              
              <div slot-scope="slot">
                <span>{ { slot.data.join(' ~ ')}}</span>
              </div>
            </cpn>
          </div>
        
          <template id="cpn">
            <div>
              <slot :data="languages">
                <ul>
                  <li v-for="item in languages">{ { item}}</li>
                </ul>
              </slot>
            </div>
          </template>
          <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
          <script>
            const app = new Vue({ 
              el: "#app",
        
              // 注册子组件
              components: { 
                cpn: { 
                  template: '#cpn',
                  data() { 
                    return { 
                      languages: ['java', 'c', 'c++', 'js', 'php']
                    }
                  }
                }
              }
            })
          </script>

## 三、Vue-CLI ##

Vue Cli 可以快速搭建Vue开发环境以及对应的webpack配置。

安装的脚手架3，但是想用2的版本，需要拉取2的模板

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70]  
**Vue CLI2初始化项目**

`vue init webpack my-project` my-project 是要设置的项目的名称

**Vue CLI3初始化项目**

`vue create my-project`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]  
Runtime-Compiler和Runtime-only的区别

如果开发使用template，就需要选择Runtime-Comoiler；如果使用.vue文件夹开发，那就选择Runtime-only

*  Vue-CLI2目录解析  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]

**Vue CLI3与2的区别**

*  vue-cli3移除的配置文件是根目录下的build和config等目录
 *  vue-cli3提供了vue ui命令
 *  移除了static文件夹，新增了public文件夹，并且index.html移动到了public中

**cli3的目录详解**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]

## 三、Vue-router ##

### 3.1 Vue-router的基础 ###

vue-router是Vue.js官方的路有插件，适合用于构建单页面应用，他是基于路由和组件的；

路由用于设定访问路径，将路径和组件映射起来；在vue-router的单页面应用中，页面的路径的改变就是组件的切换。

1.  安装vue-router `npm install vue-router --save`
2.  在模块化中使用
    
     *  1.导入路由对象，调用Vue.use()
     *  2.创建路由实例，并且传入路由映射配置
     *  3.在Vue实例中挂载创建的路由实例
3.  **Vue-router的使用步骤**
    
     *  创建路由组件
     *  配置路由映射，组件和路径映射关系
     *  使用路由，通过`<router-link>`和`<router-view>`来显示组件内容。
        
        `<router-link>`该标签是一个vue-router中已经内置的组件。他会被渲染成一个a标签,其中`<router-link>`中有一个to属性，后面跟着路径地址，`<router-view>`，该标签会根据当前的路径，动态渲染出不同的组件，`<router-view>`是用来显示在`<router-link>`里边内容位置的上方还是下方。在路由切换时，切换的是`<router-view>`挂载的组件，其他内容不会发生改变。

*  `<router-link>`的属性
    
     *  to，用于跳转到指定的路径
     *  tag，可以指定`<router-link>`被渲染成什么组件，例如渲染成button，`<router-link to="/home" tag="button">首页</router-link>`
     *  replace，该属性不会留下history的记录，指定了replace，后退键不能返回到上一个页面中
     *  active-class，当`<router-link>`对应的路由匹配成功时，会自动给当前元素设置一个 router-link-active的class，设置active-class可以修改默认的类的名称。
        
         *  在进行高亮显示的导航菜单或者底部tabbar时，会用到该类
         *  但是通常不会修改类的属性名，会直接使用默认的router-link-active即可；如果要对元素进行统一修改，需要在路由内部配置一个linkActiveClass属性，值为要修改的名称。

### 3.2路由懒加载 ###

路由懒加载的作用主要就是将路由对应的组件打包成一个个js代码块，只有当某个路由被访问的时候，才加载它。

路由懒加载的方式：

这里使用Vue组件和Webpack的代码分割写法

const Home = ()=> import('../components/home.vue')

### 3.3 keep-alive与vue-router ###

*  keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
    
    两个属性：示例，`include='User,Profile'`
    
    1.  include 字符串或正则表达，只有匹配的组件会被保存
    2.  exclude 字符串或正则表达式，任何匹配的组件都不会被缓存
 *  router-view也是一个组件，如果直接被包在keep-alive里面，所有的路径匹配到的视图组件都会被缓存。

只有在用keep-alive时，才能使用activated、deactivated这两个函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70]: /images/20221120/7d761d6f8743433dbcfedb851f1f1dc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201228180113125.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201228180206395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201228183617979.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pTNzQ1MjA=,size_16,color_FFFFFF,t_70