前端实习——Vue学习笔记(一)

一、Vue介绍

1.什么是框架

框架，framework,是能够让程序开发人员更好的专注于业务逻辑的开发，而无需关心底层功能的实现

2.什么是vue框架

vue是一个渐进式JavaScript框架

国人自己开发的框架，作者是尤雨溪

官网：cn.vuejs.org

入门简单

手册详细

生态圈活跃

vue两大核心：数据驱动页面、组件化

3.vue框架学习内容

vue、vue-cli脚手架、vue-router路由、ui库、样式预处理器stylus、网络请求axios、状态管理vuex、服务器端渲染

4.vue优点

(1)易学

(2)速度快

(3)采用虚拟DOM

(4)指令系统

(5)生态圈活跃

5.vue缺点

1.兼容性，不支持ie8及以下的浏览器

2.语法报错提示不是特别的准确

二、vue的基本使用

1.安装方式1

直接引用js文件

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2.安装方式2

结合node环境，直接下载

（1）先配置淘宝镜像

（2）下载vue

npm i vue

3.vue配置选择

(1)el配置选项

指定vue的作用范围，相当于js中的queryselector，只会匹配到满足条件的第一个标签，所以我们一般使用id选择器，不使用class或者标签选择器

(2)data配置选项

初始化页面数据，初始化的数据会直接挂载到vue实例上，直接使用key属性，作为变量名

(3)自定义函数

methods:用来存放用户自定义函数

4.vue常用指令

1.内容展示

(1)mustache语法(文本插值):{{ 变量名或单行js语法 }}

 
    

    
    

        
        
{{'小豪,'+txt}}
        
{{100*30}}
        
{{isshow?'显示':'不显示'}}
        //获取对象类型的属性的时候，只需要对象.属性名
        
{{'姓名:'+user.name}}
        //数组类型：数组名[下标].属性名
        
{{users[1].name}}
        
        
{{name}}
    
    

所有v-xxx指令都要写在标签的开始标签上

2.v-text

可以解析data中设置的初始值，v-text把初始值设置到指定的标签内

和mustache的区别：

如果要展示的内容是固定的，可以使用v-text

如果要展示的内容中的一部分是固定的，就要使用mustache语法

3.v-html

可以解析带有html标签的内容

2.条件判断

1.v-if

根据条件表达式或者布尔的结果展示或者不展示指定标签

当表达式的结果为true时，在页面结构中才会出现指定的标签

2.v-show

不论条件表达式和boolen值的结果是什么，v-show指定的标签都会在页面结构中存在

当表达式的结果为true时，在页面结构中会显示指定的标签

当表达式的结果为false时，在指定的标签上会添加按一个display:none属性

使用场景：

在页面中，要根据指定的内容来频繁的切换某些内容时，要使用v-show

3.列表渲染–循环

v-for

<标签 v-for="每次要遍历的变量名[,每次遍历的元素在数组中的下标] of/in 要遍历的数组">

可以根据数组元素数量来生成指定数量的标签

v-for循环 key属性

遍历的数据源类型是数组时，第一个参数是数组中每一项元素，第二个参数是数组中每项元素的下标

遍历的数据源类型是对象时，第一个参数是对象中每一项元素的value属性，第二个参数是对象中每项元素的key属性，第三个参数是每项元素的下标

4.事件绑定

v-on

语法格式

<标签 v-on:事件名=“自定义函数名”>

可以简写

<标签 @事件名=‘自定义函数’>

选项卡小练习

        {{btn}}
        

            
{{con}}
        
    
    

5.属性绑定

v-bind

语法格式：

<标签 v-bind:属性名=“属性值”>

可以简写成

<标签 :属性名=“属性值”>

1.style

(1)第一种用法：直接使用变量

<标签 v-bind:style="styleA">

(2)第二种用法：使用对象

<标签 v-bind:style="{属性名：属性值，...}">

如果属性名中包含’-’，把横杠去掉，并把横杠后的字母变成驼峰法命名,或者把属性名用’'引起来

如果属性值是一个单词，比如red，也要使用’'引起来

比如，font-size变成fontSize

(3)第三种用法：使用数组

<标签 v-bind:style="[变量1，变量2]">

123333
 

2.class

第一种用法：直接使用变量

<标签 v-bind:class="styleA">

(2)第二种用法：使用对象

<标签 v-bind:class="类名：表达式或者布尔值">

当表达式或Boolen值的结果为true时，表示使用该类名，否则就不使用该类名

(3)第三种用法：使用数组

<标签 v-bind:class="['类名1'，'类名2']">

class使用数组时，每一个类名都要加上引号才会被解析

6.表单元素双向绑定

设计模式

MVC和MVVM

MVC：强制的把程序的输入，输出和处理分开，方便维护

​ Model数据模型层

​ View:视图层

​ Controller控制器层 核心

MVVM：

​ Model数据模型层

​ View视图层

​ ViewModel视图模型层

1.内容展示

(1)输入框

{{msg}}

(2)文本域

{{article}}

(3)checkbox

实例代码

看电影
打游戏
吃饭
{{hobbies}}

布尔值

(4)radio

radio和checkbox在使用v-model一定要加上value值，

男
女

(5)select

    请选择
    web
    java
    ui

value属性是选中之后展示的值

5.自定义指令

vue支持我们自己定义一些指令来完成一定的操作。

语法格式：

 Vue.directive('指令名称',{
     inserted:function(el){//inserted当指令插入到标签中时，自动执行
     el.focus();//让元素获得焦点
     }
 });

注意：在Vue实例化之前设置自定义指令

bootstrap

6.用户收集表功能实现

当用户输入完姓名、年龄等信息后，点击提交按钮完成数据的添加操作

数据添加完成后，在表格中显示已添加的用户信息

示例代码

    

        
用户信息收集
        

            姓名
            

                
            
        
        

            年龄
            

                
            
        
        

            
            提交
            重置
        
    

    

        

            

                
姓名
                
年龄
                
操作
            
        
        

            

                
{{item.user}}
                
{{item.age}}
                

                    编辑
                    删除
                
            
            


                
尚无用户信息
            

        
    

7.修饰符

1.事件修饰符

(1)阻止默认事件

<标签 @事件名.prevent>

(2)阻止事件冒泡

<标签 @事件名.stop>

(3)捕获事件

<标签 @事件名.capture>

不会阻止或改变事件冒泡，但是会改变冒泡函数的执行顺序，哪个标签上有capture哪个标签优先执行

(4)自身

<标签 @事件名.self>

.self强调的是当前操作的元素只有是她本身时，才会触发指定的函数，类似阻止事件冒泡

(5)只执行一次

<标签 @事件名.one>

2.表单元素修饰符

(1)懒加载 lazy

不再对数据进行实时双向绑定，而是在执行change事件时，才进行双向绑定

(2)number

不强制页面用户输入的内容，而是转变数据类型为number

如果写的内容是数字开头，字符串结尾，那么number修饰符会把字符串过滤掉

如果是字符串开头，不做任何修改

(3)trim

过滤输入内容左右两边的空格，不包含中间的空格

3.其他修饰符

1.enter

2.left

3.right

4.middle

5.esc

6.tab

7.down

8.up

三、数据本地存储

1.LocalStorage 只要不人为删除掉数据，数据就一直存在

2.sessionStorage 只要关闭浏览器，数据就消失了

1.数据添加

setItem(‘key’,value)

2.数据读取

getItem(‘key’)

3.删除数据

removeItem(‘key’)

根据指定的key删除

clear()

删除本次存储中的所有数据

四、模拟跨域请求

1.基本步骤

2.示例代码

     搜索
    

        
{{item}}
    

五、侦听/监听器

作用：可以对页面中已经定义好的变量进行监听，一旦变量值发生了改变，就可以执行一定的操作。

语法格式：

1.普通监听：

语法1：

new Vue({
	el
	data
	methods
	watch:{
		变量名(){
			函数
		}
	}
})

语法二：

new Vue({
	el
	data
	methods
	watch:{
	要监听的变量名：{
		handler(newVal, oldVal) {}
	}
})

2.深度监听

如果要监听的变量类型为对象或数组时，普通监听无法实现监听的变化效果，需要使用深度监听

new Vue({
	el
	data
	methods
	watch:{
	要监听的变量名：{
		handler(newVal, oldVal) {},
		deep:true//进行深度监听
	}
})

六、计算属性

作用：如果页面上有需要频繁进行数学运算之后得到结果内容时，可以使用计算属性来实现

页面上可以不用在data中定义计算结果的初始变量，只要在挂载点内使用计算属性的结果后，计算结果对应的函数会自动触发

计算属性关联的数据，一旦发生改变，那么计算属性的逻辑函数会重新执行

语法格式

new Vue({
	el
	data
	methods,
	computed:{
		要计算的结果(){
			业务逻辑...
			return 结果；
		}
	}
})

1.计算属性的get和set

在计算属性中内置了两个方法，一个是get，用来读取数据，一个是set用来设置数据。

在vue中默认使用的是get方法，只要在页面中使用了计算属性的变量或者计算属性变量依赖的数据发生了改变时，get方法会重新执行。

示例代码：

 <div id="app">
 {{ sum }}
 </div>
 <script>
     let vm = new Vue({
         el:"#app",
         data:{
             num1:10,
             num2:20
         },
         computed:{
             sum:{
                 get(){
                     console.log('get')
                     return this.num1 + this.num2
                 },
                 set(){
                 	console.log('set')
                 }
             }
         }
     })
</script>

只有给计算属性的变量直接赋值时，set函数才会执行。

可以在谷歌浏览器的控制台中进行测试

vm.sum = 100 //此时自动执行set函数
vm.num1 = 20 //此时自动执行get，因为计算属性依赖于num1

2.计算属性和监听的区别

(1)相同之处

都可以根据依赖的数据变化，自动的触发相应的逻辑函数代码

(2)不同之处

计算属性的逻辑函数在页面使用了计算属性的变量后，就会自动的触发对应的逻辑函数

监听是只有依赖的数据发生了变化的时候，才会触发对应的逻辑函数

(3)注意事项

如果计算属性和监听，都对相同的数据进行操作，那么就会产生冲突互相影响。

3.计算属性和methods的区别

methods中定义的函数，只要在页面上调用，就会无条件执行

计算属性依赖的数据不发生变化时，只是读取，不会重新计算

计算属性特点：

依赖于数据，如果数据发生变化，那么计算属性就会自动更新

计算属性的结果无需在data中定义，在页面中可以直接使用

会在vue实例上产生一个缓存，如若依赖的数据不发生变化，就会读取缓存

七、过滤器

作用：

​ 对页面中要展示的数据进行处理，满足页面数据展示的需求。

定义：

1.局部定义

new Vue({
	el
	data
	filters:{
		'过滤器名称':function(形参1[,形参N...]){
			业务逻辑
			return 结果
		}
	}
})

使用：

需要通过管道符来使用定义好的过滤器，要进行过滤的源数据 | 过滤器名称

传递额外参数：

管道符左边的是过滤器中的第一个参数，在管道符右边过滤器名称处，可以通过小括号来传递额外的参数。

示例代码：

<div id="app">
    <!-- 使用过滤器 -->
	总价格：{{ totalPrice | formatPrice }}
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            totalPrice:2999.9
        },
        filters:{
            //定义一个格式化价格的过滤器
            formatPrice(val,n=1){
            	return '￥'+val.toFixed(n)+'元';
            }
        }
    })
</script>

2.全局定义

语法：

Vue.filter('过滤器名称',function(形参1[,形参N]){
	...
})
new Vue({})

全局定义的过滤器，可以在当前页面中的所有vue实例中来使用过滤器

八、过渡动画

transition标签

当元素通过v-if或者v-show或者动态组件的方式进行展示或者不展示的标签下就可以设置过渡动画

1.内置类名

注意：想要有效果，就要用标签包裹

(1)匿名方式

进入状态

​ v-enter 设置进入开始状态的样式

​ v-enter-active 设置进入进行中状态的样式

​ v-enter-to 设置进入结束的状态的样式

离开状态

​ v-leave 设置离开开始状态的样式

​ v-leave-active 设置离开进行中状态的样式

​ v-leave-to 设置离开结束的状态的样式

(2)具名类名

如果页面上有多个元素需要设置过渡动画，可以给添加name标签进行区分

2.第三方工具(插件)

animate.css

1.可以用npm安装或者直接引入在线链接

2.给需要设置过渡动画的标签添加标签

3.给标签设置开始和结束的动画类名

九、生命周期

1.什么是vue的生命周期

vue实例从创建、挂载、更新、销毁的一个完整的过程叫生命周期

2.钩子函数

(1)页面渲染期：页面加载时自动触发的钩子函数

beforeCreate 创建之前 vue实例创建之前

Created 创建完成 vue实例创建完成

beforeMount 挂载之前 vue实例创建完成，解析vue语法之前

Mounted 挂载完成 解析vue语法，在这儿发起网络请求

(2)页面更新期：页面上的数据有变化时自动触发的钩子函数

beforeUpdate 更新之前

updated 更新完成

(3)页面销毁期：vue实例被销毁时会自动触发的钩子函数 vm.$destroy ()

beforeDestroy 销毁之前

destroy 销毁完成

十、组件

​ 组件是vuejs中最强大的功能之一，组件可以扩展html元素，封装可复用的代码，在大型项目中，为了合理分工、代码复用。每一个组件都是一个vue的实例，所以vue实例中的配置选项在组件中都可以使用。

1.组件的注册

(1)局部注册

语法格式

new Vue({
	el
	data
	...
	components:{
		"组件名称"：{
			template:'组件内容'
		}
	}
})

template是组件的模板内容，必须设置

使用：要在挂载点内，把组件名称当成一个普通的标签使用即可

关于组件名称注意事项：

1.组件名称不能是html内置的标签;

2.组件的名称不能是html内置的标签全大写

3.如果组件的名称包含大写字母(非首字母)，在使用组件时，要把大写字母转换成：-小写字母

myDiv需要写成

关于组件模板注意事项：

组件的模板内容中只能有一个根标签

(2)全局注册

全局注册的组件，可以在所有的vue实例中使用

语法格式：

Vue.component('组件名称'，{
	template:'组件内容'
})
new Vue({

})

2.template模板的使用

template标签不会被浏览器解析，并且还可以在其中编写html标签

组件中的template属性和template标签是两个不同的东西，不要混为一谈

鉴于组件的template属性中直接编写页面内容不是很方便，所以我们可以结合template标签来设置组件中的内容

但是需要把template属性和template标签关联起来

(2)代码优化

由于减的基本构成是一个对象，当页面中组件数量比较多时，注册组件时的代码量就比较多，看上去非常混乱，我们可以把组件的构成提前定义好

var first = {
	template:'#first',
}
var second = {
	template:'#second'
}
new Vue({
    el:'#app',
    components: {
    first,
    second,
	}
})

3.组件的嵌套

方法一：直接注册使用

方法二:使用extend方法

    
 
var child = Vue.entend({
	template:'
子组件
'
})
var parent = Vue.extend({
	template:'
父组件
',
	components:{
		child
		}
})
new Vue({
	el: '#app',
components: {
    parent
    }
})

4.组件中的data应该是一个函数

因为对象类型的数据影响，组件复用时，数据会相互影响，所以为了保证数据的正确性和独立性，在组件中，定义data时，要写成一个函数并返回一个对象来定义组件的初始数据

示例代码：

十一、脚手架

1.安装

版本的问题：

稳定版 2.9.6

最新版 4.X

基础环境：node

(1)webpack

npm i webpack -g

(2)vue-cli脚手架

npm i vue-cli -g

2.初始化项目

进入一个非系统盘的目录中

vue init webpack projectname

注意：项目名称不能包含中文和空格

初始化项目步骤

(1)先执行初始化命令，回车

(2)Project name（myapp）?

确认项目名称，不改则回车

(3)Project description A Vue.js project

项目描述，不改则回车

(4) Author (林聪 admin@nimda)

项目作者，不改则回车

(5) Vue build (Use arrow keys) Runtime + Compiler: recommended for most users

项目运行模式,运行时编译

(6)Install vue-router? (Y/n)

是否安装路由，暂时不安装，n

(7)Use ESLint to lint your code? No

是否使用 ESLint 验证代码格式

(8) Set up unit tests (Y/n) n

是否创建单元测试

(9)Setup e2e tests with Nightwatch? (Y/n) n

是否要使用端对端测试

(10) Should we run npm install for you after the project has been created? (recommended) (Use arrow keys)

Yes, use NPM

3.运行项目

进入项目根目录下，执行

npm run dev

4.项目目录结构

build 项目打包依赖的目录

config 项目配置文件目录

node_modules 项目依赖目录

project 项目跟目录

src 项目源代码

​ assets 项目静态资源目录

​ components 存放项目自定义组件

​ App.vue 项目跟组件

​ main.js 项目启动文件

​ static 存放通过域名直接访问的静态资源

.bablerc es6语法解析配置

.editorconfig 编辑器配置文件

.gitignore git 忽略的配置文件

.postcssrc.js postcss的配置文件

index.html 项目首页

package-lock.json

package.json 项目依赖配置文件

项目执行顺序：

index.html

/src/main.js

/src/App.vue

/src/components/HelloWorld.vue

5.vue组件构成

(1)模板template 必须

(2)js script

(3)css style

6.组件通信

1.父子组件通信

通过自定义属性和props来实现

(1)在父组件中使用子组件时，通过自定义属性来传递数据

(2)在子组件中通过props来接收父组件中传递过来的数据

props验证

(1)验证数据类型,只是在控制台中给出警告，不会影响程序的运行

在子组件中接收数据时，props写成一个对象

props:{
	要接收的参数名：数据类型
	写法一：仅验证数据类型
	gift:String,
	写法二：不仅仅验证数据类型还可以做其他的验证
	age:{
		type:Number
	}
}

支持的数据类型：Boolean、String、Number、Function、Object、Array、Symbol

(2)验证必填,只是在控制台中给出警告，不会影响程序的运行

props:{
	age:{
		type:Number，
		required:true//必填项
	}
}

(3)默认值：如果父组件在使用子组件时没有传递子组件需要的数据时，会使用默认值来代替

props:{
	要接收的参数名：{
		方法一：
		default:''//默认值
		方法二：
		default(){
			return '啥也没有'
		}
	}
}

(4)自定义验证规则

props:{
	要接受的参数：{
		type：'',
		validator:funcrion(形参){
			验证逻辑规则
			return Boolean
		}
	}
}

只要父组件给子组件传递了腰验证的参数时，validator中的验证规则会自动触发

如果规则函数返回true，表示验证成功

如果规则函数返回false，表示验证失败，就会在控制台中给出验证失败的警告

2.子父组件通信

通过自定义事件和$emit

数据是有父组件传递给子组件的，如果子组件想要改变数据，则要通过父组件传递一个自定义事件，然后在子组件中触发这个事件来实现数的改变

(1)父组件在使用子组件是传递一个自定义事件

addcount就是一个自定义事件，对应一个父组件级别的函数

(2)子组件通过自身的methods自定义函数通过this.$emit来触发父组件传递的自定义事件

3.非父子组件通信

eventbus

(1)创建一个公用的容器，用来进行数据的发送和接收

在src/main.js中，vue实例化之前，给vue的原型上添加一个公共容器

Vue.prototype.$bus= new Vue();

(2)$emit

在数据发送的组件中，通过公用容器中的$emit方法来触发一个函数并发送数据

sendData(){
	this.容器名称.$emit('事件名'，'要传递的数据')
}

(3)$on

在其他任意组件里，通过公用容器中的$on方法来监听触发事件名称,用来接收发送端传递的数据

mounted(){
	this.容器名称.$on('事件名称'，(形参)=>{
		...
	})
}

十二、devtools

devtools是vue全家桶中的一个浏览器插件，作用是让我们开发人员能够非常清楚的了解项目的组件结构和数据及状态

安装：在谷歌浏览器中访问浏览器商店，搜索vue关键词在搜索的结果匹配中第一个就是，点击添加到chrome中

使用：

打卡某个vue项目页面后，然后打开浏览器的调试工具

十三、scoped

为了限制样式污染，可以给style标签设置一个scoped来显示样式的作用范围仅在当前组件起作用

十四、组件进阶

1.is属性

(1)改变html标签的默认结构约束

这是一个标题

(2)动态组件

①需要结合非父子组件通信和is属性，来实现页面上，展示不同的内容

在左侧菜单栏上，

②在content组件中，引入所有需要展示的页面组件并注册，然后通过页面监听来接收数据

2.ref

vue中一般不直接操作DOM结构，如果必须要进行DOM结构操作，可以给标签或者组件添加ref结构

(1)普通字符串

XXX管理系统

(2)数组

如果在v-for循环的标签上，设置了ref属性，那么通过$refs获取到的DON节点的数组

(3)自定义组件

ref属性更多的应用在自定义组件上，可以实现父子组件通信的效果

注意：ref只能在挂载完成后使用

3.jQuery

1.安装

(1)直接引入jQuery.js文件

在项目根目录中引入index.html文件中

(2)npm安装

npm i jquery --save

在vue组件中引入使用jQuery

import $ from 'jquery'

2.使用

$('.box').slideUp(1000)

把jquery挂载到原型上

import jq from 'jquery'
Vue.prototype.$=jq
new Vue({})

把jq挂载到原型上以后，在任意的组件上都可以通this.$来使用jQuery

4.插槽

作用：如果需要在父组件使用子组件时，来分发一些不同的内容展示在子组件中，可以使用vue提供的插槽来实现

slot

(1)匿名插槽

是在子组件中，写入一个标签，设置一个插槽的位置。

这样，在父组件中使用子组件中，就可以在子组件内写入内容，并展示在子组件的插槽中

父组件：

     
父组件标题
     
父组件内容

子组件：

      
      
    
waht组件

(2)具名插槽

如果子组件中有多个插槽来展示不同的内容，用匿名插槽就会出现重复的内容

为了区分不同的插槽，可以给slot来设置一个name属性来区分它们

父组件：

    
父组件标题
    
父组件内容

子组件

      
    
    
waht组件
    

(3)作用域插槽

在用插槽的时候，希望父组件可以控制插槽的结构和内容，子组件只做遍历循环，具体内容由父组件控制

子组件的一部分DOM结构是由外部传入

子组件：

父组件：

十五、路由

作用：让用户能够根据不同的浏览器地址来展示不同的页面组件

SPA:single page application 单页面应用

概念：

略

1.基本使用

安装：

(1)在进行初始化项目时，选择安装路由

@会自动找到src目录

(2)手动安装

①安装vue-router插件

npm i vue-router --save

②引入并实例化，挂载到vue的配置选项上

import Router from 'vue-router'
Vue.use(Router);
// 实例化vue-router路由管理器
let router = new Router({
  routes:[]//路由配置映射表
})
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

③创建几个页面组件

④配置路由映射表规则

/src/main.js

let router = new Router({
  routes:[
    {
      path:'/login',//浏览器地址中的关键词
      component:Login//与关键词匹配的页面组件
    }
  ]//路由配置管理映射表
})

⑤在App.vue中添加路由出口组件

内置组件router-view

作用：浏览器地址中的关键词和路由映射表中的关键词匹配时，会把匹配的组件模板内容展示到此处

2.路由文件夹分离

1.在src下建立router文件夹，建立index.js

//引入核心插件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//引入页面组件
import Index from '../components/Index'
import Login from '../components/Login'
export default new Router({
	routes:[
	{
		path:'/index',
		component:Index
	},
	{
		path:'/login',
		component:Login
	},
	]
})

2.在main.js中引入

import router from './router'
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3.重定向

当某个路由规则没有匹配到时，我们可以设置一个默认的页面，首页/404页面,重定向已经存在的某个path属性

/src/router/index.js文件中

export default new VueRouter({
    routes:[
        {
            path:'/index',
            component:Index
          },
          {
            path:'/login',
            component:Login
          },
        	{
        	path:'*',
        	redirect:'/index'
        	}
    ]
})

注意：如果需要浏览器地址变化，必须使用rediect属性，不能使用component属性

4.路由导航

作用：能够让访问网站的用户，快速的访问到指定的页面

router-link和编程式导航的区别：

router-link会生成a标签，编程式当好是我们自行编写的程序代码

编程式导航中的代码会无条件执行，当要跳转的路由地址就是当前访问的地址时，会产生错误，router-link不会在跳转

(1)内置标签

router-link

必要属性：to,具体的某一个路由规则的path属性的值

选填项：

active-class=“active”，模糊匹配，可以设置激活状态的router-link的状态

exact-active-class=“select”，精确匹配，可以设置激活状态的router-link的状态

首页
登录
   

(2)编程式导航

①push

push方法会在执行页面跳转之前，把当前访问的页面地址链接进行记录，然后再跳转

this.$router.push('path属性的值')

②replace

replace方法会在执行页面跳转之前，把要跳转的链接地址覆盖当前访问的链接地址，

this.$router.replace('path属性的值')

应用场景：支付成功页面后

③go

用于返回已访问过的页面地址，一般写-1，表示返回上一个界面

this.$router.go(-1)

5.路由嵌套

如果某个页面中还有不同的子级页面要展示，可以使用路由嵌套来实现

(1)创建页面组件

(2)定义路由规则，通过children属性来设置子级路由规则

router/index.js

 routes:[
 {
     path:'/index',
     component:Index,
     children:[
     {
     path:'movie',
     component:Movie
     },
     {
     path:'music',
     component:Music
     },
     ]
     },
     {
     path:'/login',
     component:Login
 }
]

注意：子级路由规则的path属性不需要加/

(3)在一级路由规则对应的页面中放入路由出口，对应子级路由界面

父级组件中

注意：在子级路由的导航组件中，path属性必须包含一级路由规则/二级路由规则

6.动态路由

不同的路由规则匹配到同一个页面上，这种路由规则，叫做动态路由

1.设置路由规则

{
      path:'/user/:变量名',
      component:组件
 }

参数名前一定要有冒号，冒号后面的是一个可以变化的字符串数字的组合

2.跳转到动态路由地址

this.$router.push('/index/user/'+uid);

3.获取动态路由中的参数

let uid = this.$route.params.uid;
if (uid) {
     this.info = this.users.find(item=>{
         return item.id == uid;
     })  
    }

7.查询参数

在参数个数不确定时，使用动态路由的方式传递参数就不合适

我们可以使用查询参数的方式进行数据传递

(1)定义路由规则

{ path: 'article/info', component: ArticleInfo }

(2)在表格页面通过点击编辑按钮，实现路由跳转并传递参数

toInfo(obj){
	this.$router.push({
		path:'/index/article/info',
		query:{id:obj.id,title:obj.title}
	})
}

路由跳转后，链接地址会以下面的方式进行自定拼接：

query的数据类型是一个对象，对象的元素与元素之间，第一个元素会以?开头，开头+key1=value&keyN+valueN

(3)在表单页面获取路由参数

this.$route.query.id
this.$route.query.title

十六、路由进阶

1.路由命名

(1)设置路由规则时，添加一个name属性，给这个路由规则设置一个不能重复的名称

 { 
     path: 'user/:uid', 
     component: UserInfo,
     name:'yonghu' 
 },

(2)在页面组件跳转路由规则时，不用按照以前的手动不全一级路由、二级路由和参数的方式

toInfo(obj){
	this.$router.push({
		name:'yonghu',
		params:{uid}
	})
}

2.路由别名

可以给已有的路由规则，设置一个其他的名称，此时，已有的路由规则和别名都可以正常访问到指定的页面组件

{ 
	path: '/login', 
	component: Login,
	alias:'/denglu' 
}

此时/login和/denglu，看到的是同一个页面组件

3.路由模式

vue-router中默认由两种路由模式

一种hash(默认)，浏览器地址中有#，将#后的当成路由

​ hash虽然会出现在url地址中，但是不会包含在http请求中，不会重新加载页面，beforeRouterUpdate生效

另一种是history，浏览器地址中没有#

​ 利用html5的history接口中的方法实现页面跳转，history部署到服务器上，会出现404情况，需要后端配合进行配置，会重新刷新页面，beforeRouterUpdate不生效

在src/router/index.js中进行路由设置

export default new Router({
	mode:'history',
	routes:[]
})

4.路由懒加载

{
path:'user',
component:()=>import('@/components/pages/users/user')
}

十七、路由守卫

作用：让指定的路由规则满足一定的条件时，才能够被访问，可以实现请求拦截的功能。

根据路由守卫的作用范围不同，分成以下三种:

1.全局守卫

(1)全局前置守卫钩子函数

当前项目中所有的路由规则被访问之前，可以进行一定的验证操作

router.beforeEach((to,from,next)=>{
    //to:目标路由地址
    //from:来源路由地址
    //next:函数，用来执行或者改变默认的路由规则
    //next();//执行默认路由规则
     let userinfo = localStorage.getItem('user');
    // 如果用户已登录，就执行默认的路由规则
    // 如果用户未登录，并且访问的不是登录页面，就跳转到登录页面
    // 如果用户未登录，并且访问的是登录页面，就执行默认的路由规则
    if(userinfo){
        // 用户已登录，就执行默认的路由规则
        next();
    }else{
        // 未登录
        if(to.fullPath!='/login'){
            // 访问的不是登录页面，就跳转到登录页面
            next('/login')
        }else{
            // 访问的是登录页面，就执行默认的路由规则
            next();
        }
    }
})

(2)全局后置守卫钩子函数

当前项目中所有的路由规则被访问之后，没有验证和拦截的功能，一般做记录

router.afterEach( (to,from) => {
    //to:目标路由地址
    //from:来源路由地址 
})

2.组件守卫

(1)beforeRouterEnter

写在具体的组件中

当前组件的路由规则访问之前

beforeRouteEnter(to, from, next) {
	//to:目标路由地址
    //from:来源路由地址 
    //next:函数，用来执行或者改变默认的路由规则
}

(2)beforeRouteLeave

当前组件路由规则离开时，切换到其他路由规定时，此钩子函数可以获取到this

beforeRouteLeave(to,from,next){
    //to:目标路由地址
    //from:来源路由地址 
    //next:函数，用来执行或者改变默认的路由规则
    //this：VueCompent
  }

(3)beforeRouteUpdate

动态路由的参数值发生变化时，会自动执行，此钩子函数可以获取到this

    beforeRouteUpdate(to,from,next){
      //to:目标路由地址
      //from:来源路由地址 
     //next:函数，用来执行或者改变默认的路由规则
  },

3.路由独享守卫

写在路由映射表配置规则中

 { 
     path: 'user/:uid', 
     component: UserInfo,
     name:'yonghu',
     beforeEnter(to,from,next){
         console.log(to)
         console.log(from)
         console.log(next)
     } 
 }