vue控制台消除两个小提示

1.安装vue开发者工具 即可消除
2.提示我们正在使用一个开发者的vue版本 开发者版本比较大(有报错提示功能) 在生成环境中最好替换为生产版本
添加 Vue.config.productionTip = false 即可消除

事件绑定@click传参问题

默认会传event事件参数 @click="showInfo"和@click="showInfo(event)"相等的

可以直接传参@click=“showInfo(66)” 同时也可以带上事件参数@click=“showInfo($event,66)”

v-bind 属性绑定

标签中属性加 v-bind: 进行属性动态绑定 age的值 是双引号里面运行的表达式的值 而不是字符串

不加 v-bind: age的值 是双引号里面的字符串

上面age值的是 数值19

下面是 字符串 18+1

Vue中data函数两种写法

vue3中只支持函数式

由Vue管理的函数如果用箭头函数写 this指的不再是vue实例 而是window

箭头函数中this指代是window

事件修饰符

• prevent

  添加后点击<a>标签 不再跳转 只执行showInfo事件函数

  

• stop

  添加后点击<button>标签 不再触发两次showInfo事件 只执行里面的事件

  

• once

  添加后点击<button> 标签 只触发一次 再点击无反应

  

• capture

  在div1中添加capture后 点击 标签 先执行div1的事件 再执行div2的事件

  事件捕获 顺序：由外到内 div1 --> div2

  事件冒泡 顺序：由内到外 div2 --> div1

  嵌套的div执行顺序为：先事件捕获后事件冒泡

  由于正常事件 在冒泡阶段触发 所以正常先执行div2 再div1 结果为 2 1

  在div1中添加capture后 点击 标签 在捕获阶段中就执行div1的事件 再执行div2的事件 结果为1 2

  

键盘事件

在按下指定按键后才触发事件反应
自定义按键（vue3被禁止）

按下回车键才触发showInfo事件 keyup 按键抬起后触发

e.key 按键名称 enter control(ctrl)

e.keyCode 按键编码 13 17

插值语法调用函数

watch监事属性

监听属性（data中的 computed计算属性中的）发生变化时调用监听函数中的handler回调函数

1.可以添加参数 newValue oldValue 2.添加配置 immediate:ture 初始化时就调用

deep 开启深度监视：监视data属性中某一个属性的子属性是否变化

只监听某一个子属性用 ‘属性名.子属性名’ 方式

监听任意子属性变化用deep:true

• 简写方式

  

watch和computed区别

watch可以执行异步操作例如 延时1s执行某个函数 computed做不到 是同步的

v-if和v-show

v-if 切换频率低时使用 控制DOM是否有节点 false时不渲染

v-show 切换频率高时使用 控制DOM的style:"display:none"的值 任何情况必渲染

template 只能搭配v-if 使用 v-show不行

v-for遍历key值原理

v-for遍历时 看情况要添加唯一的key值 如不添加vue默认添加 ;key=“index”

key值为index时 在操作遍历列表数据时可能出现 界面错乱 遍历效率低情况 如果数据仅展示可不添加

key值应为唯一值 如id 身份证号 学号等

• key值为index 页面有输入框 在数据最前面添加新数据时页面错乱 原理

  

• key值为id 页面有输入框 在数据最前面添加新数据时页面正常 原理

  

Vue中修改或添加数组的某个元素

必须使用 push pop shift unshift splice sort reverse 方法

或者 Vue.set(对象，属性名，值 vm.$set(对象，属性名，值)

直接使用索引修改的话 Vue不会做响应式处理 （页面不会渲染）

js中数组操作

操作会影响原数组的：

push 末尾添加 splice 替换元素 splice(0,1,“喝酒”) （开始索引，替换元素个数，替换元素）

pop 末尾删除 sort 排序

shift 首位删除 reverse 翻转

unshift 首位添加

不会影响原数组(返回新数组):

filter 过滤

.filter 数组过滤: return 需要满足的条件 返回一个新的数组

indexOf: 是否包含指定字符串 不包含返回-1 包含返回所在索引值 空字符串返回 0

.unshift: 在数组最前面添加元素

.push: 在数组后面添加元素

Math.floor: 向下取整

Math.random(): 生成随机数 [0,1)

.sort: 数组排序 a.b 为数组中两个元素进行比较

a-b: 升序

b-a: 降序

给对象中添加属性（做响应式处理）

Vue对象中后添加的属性默认不做响应式处理 （添加数据后数据更新 页面不刷新）

使用： Vue.set(对象，属性名，值) this.$set(对象，属性名，值)

这样后添加的属性具有响应式（getter 和 setter)

给对象中修改属性

修改对象的已有属性可以直接修改 （先添加的属性Vue已经进行了响应式处理）

reduce数组统计函数

.reduce( (pre,current)=>{ } , )

可以用来统计数组中做了某事的数量 货币大于100的数量等

下面的用来统计 todos 数组中 done值为true的对象的数量

第一个参数 条件函数 第二个参数 统计初始值

(pre,current)=>{ } 这个函数调用的次数为数组的长度

pre 上一次调用的返回值

current 当前值 数组的当前元素值

v-model表单

radio 单选框的 一定要添加value值

checkbox 复选框的 添加value值 对应的属性为数组 （添加checked 默认选择项)

v-mode绑定的值不能是props传的值 因为props是不可以修改的

filters过滤器

使用时 通过管道符号 | 加过滤器名 即可调用（可以同时执行多个过滤器）

调用时会自动将time 值 传入（默认）

过滤器传参可以有两个参数 第一个默认为前面的time值 （调用时可以不写）

第二个为主动传值 如果调用时没有传第二个值 第二个值默认为str的值

过滤器会生成新的数据 不会改变原数据

要用新的对象接收

全局过滤器

定义一个名为 mySlice 的全局过滤器

循环定时器

setInterval(()=>{ 操作 },1000) 设置定时器 操作及时间间隔

clearInterval(定时器名) 销毁定时器

生命周期

非单文件组件（不是.vue结尾的文件）

使用Vue.extend({ }) 创建组件

里面通过templatel来编写html结构 只能有一个根节点（用一个div包裹全部html）

数据部分用date函数式编写 data(){ } (防止数据连带)

可以简写 省略 Vue.extend({ }) （在Vue脚手架中）

在Vue实例中用components:{ } 注册组件（局部注册)

1.Vue实例中的组件名：引入组件名

2.直接使用相同组件名

Vue.component(‘实例中组件名’,引入组件名) 全局组件注册

全局组件可以在不同Vue实例中使用 （不用在不同Vue实例中再去分别注册）

直接用组件名做标签 使用组件 (局部组件，全局组件同理)

组件名设置

Vue实例中的组件名等于引用组件名 可以直接写

一个单词 首字母小写school

Vue开发者工具中显示为首字母大写

一个单词 首字母大写School

Vue开发者工具中显示为首字母大写

多个单词用 - 分隔 my-school 同时必须用 ‘’ 标记

多个单词 首字母全大写 必须在脚手架中才可用使用

在注册组件是使用name 命名组件名 在Vue开发者工具中显示对于的name名

Vue文件 命名规则

1.school.vue 1.my-school.vue

2.School.vue (推荐) 2.MySchool.vue （推荐）

单文件组件（.vue结尾的文件）

export default { } 暴露组件

name 和文件名一致

.vue文件快速创建模板

<v 回车

脚手架文件结构分析

index.html文件说明

main.js文件说明

render: h => h(App) 只在main.js 文件中调用一次

完整版：核心功能+模板解析器 （文件大）

精简版：核心功能 （文件小）

因为在main.js中引入的是’vue’ 这个’vue’ 是精简版的 解析不了App模板

所以要调用render函数 去进行模板解析

render函数调用createElement函数 createElement可以直接解析html结构

vue.config.js 关闭语法检查功能

在项目目录下新建 vue.config.js 文件 添加如下代码

想要修改项目入口 修改entry 地址

查看脚手架默认配置指令 vue inspect > output.js 会生成一个output.js文件

个性化配置详情 https://cli.vuejs.org/zh/config/#pages

ref属性

props配置–父传子

父子组件 父传子 传递数据时想传 数值 对象 方法 可以使用v-bind: 属性绑定 这样传递的值是 表达式的值

props比data执行优先级高 先执行props后执行data 所以有同名属性时显示的是props的属性值

v-mode绑定的值不能是props传的值 因为props是不可以修改的

所有props的属性都会成为component对象的属性, 模板页面可以直接引用

自定义事件–子传父

父子组件 子传父

• 使用vue的自定义事件机制
  • 绑定事件监听
    • 方式一: 通过$on()

      this.$on('delete_todo', function (todo) {
        this.deleteTodo(todo)
      })
      1
      2
      3

    • 方式二: 通过events选项

      events: {
        'delete_todo': function (todo) {
          this.deleteTodo(todo)
        }
      },
      1
      2
      3
      4
      5

    • 方式三: 通过v-on绑定

      @delete_todo="deleteTodo"
      1

  • 触发事件(3种情况)

    this.$emit(eventName, data): 在当前组件触发事件
    this.$dispatch(eventName, data): 分给父辈组件(冒泡)
    this.$broadcast(eventName, data): 广播给后代组件
    1
    2
    3

父组件中在子组件标签上添加 自定义事件 @自定义事件名=“回调函数名”

并配置回调方法（可传参一个或多个）

父组件中在子组件标签上添加 ref属性 ref=“标签属性名” 获取ref所在组件实例 通过dom操作实现

并配置回调方法（可传参一个或多个）

在生命周期函数中 通过 this.$ref.student.$on(‘自定义事件名’,this.回调函数名)

可通过设置 定时器搭配 箭头函数实现延时功能

通过箭头函数直接将 getStudentName 函数实现

this 指向当前组件vc data中的studentName 属性

在子组件中通过 this.$emit(‘自定义事件名’) 调用回调函数demo 并传值

this 为当前组件实例对象vc

父组件中回调函数传多个参数 name为第一个参数 …params 为剩余参数（以数组方式接收）

子组件中通过 ， 分隔各个参数

在父组件中的子组件标签上 通过 原生事件.native 可以实现对子组件的事件添加

这么写相当于在子组件的 根标签 上添加show事件函数

bus全局事件总线

适用于任意组件之间的通信 如 兄弟组件 孙子组件 父子子父组件一般使用props和emit更方便

在main.js中的new Vue 中添加beforeCreat生命周期函数并配置bus 全局事件总线

接收数据组件中 在生命周期函数中（最好在mounted中实现）

通过 this.$bus.$on(‘回调函数名’,this.方法名) 配置回调事件

或者 使用箭头函数 this.$bus.$on(‘回调函数名’,（参数)=>{ })

在 接收数据组件中 最好添加beforeDestroy生命周期函数 通过 this.$bus.$off(‘回调函数名’) 解绑 组件通信

发送数据组件中 通过 this.$bus.$emit(‘回调函数名’,参数) 将数据发送给接收组件触发回调函数

mixin.js混入

把多个组件共用的配置提取为一个混入对象 在使用时引入

mixin.js中可以写任何vm配置 如 data methods mounted

mixin.js和组件中共有的属性配置优先级：

data中的优先显示

生命周期函数中 全部执行 互不干扰 混入中的先执行

配置一个mixin.js文件 混入文件 位置和main.js平级

以对象的形式对外分别暴露

局部引入：

在对应的组件中 通过 import{ } from ’ ’ 引入混入

添加mixins:[ ] ；里面添加对应混入对象名

全局引入

在main.js中 通过 import{ } from ’ ’ 引入混入

Vue.mixin( ) 里面添加对应混入对象名

这样vm 和 vc(VueComponent的实例对象)都会引入混入配置

引入插件

在main.js 中 通过 import 插件名 from ‘路径’ 引入插件

通过 Vue.use(插件名) 应用插件

既可以使用插件中的各种功能 （类似第三方库）

scoped

让样式在局部使用 防止多个同名样式冲突

多个同名样式 会以在App.vue 文件中 后引入import的样式为准

唯一id生成库nanoid

uuid的精简版

在控制台 输入 npm i nanoid 进行安装

使用 import{nanoid} from ‘nanoid’ 引入

直接调用函数 nanoid() 即可生成唯一id

foreach遍历函数

WebStorage 存储

存对象时 使用 JSON.stringfy( ) 将对象转化成字符串

获取时使用 JSON.parse( )

查看对象身上是否有某个属性

对象.hasOwnProperty(‘属性名’) 返回true或者false

nextTick 基于新dom操作数据

Vue中一个回调函数中 先遍历一遍代码 然后对比dom看看修改了哪些地方 然后才去解析模板 更新dom

nextTick()函数 就是 先遍历一遍代码 然后发现nextTick函数 不执行nextTick函数 在对比完dom并更新完dom渲染完模板后 再去调用nextTick函数

修改isEdit为true后 会显示input输入框节点出现 直接写this.$refs.inputTitle.focus()的话 不会奏效

因为 vue是 执行一遍全部代码后才更新dom 渲染模板 执行完 todo.idEdit后输入框input节点还没出现 下面的获取不到节点操作不了

使用nextTick() 就是在handleEdit函数执行完 再执行nextTick函数 此时就有input输入框的节点了

通过添加定时器也可以实现这功能 但不推荐

axios引入

安装 npm i axios

引入 import axios from ‘axios’

response 和 error 都是对象

代理服务器配置（跨域问题）

使用axios时会面临服务器跨域问题 1.后端解决 2.前端解决

前端 使用代理服务器 在vue.config,js 里面配置代理服务器实现反向代理解决跨域问题

配置的代理服务器端口号默认和发出请求的服务器一样8080

原理 前端服务器8080通过axios向5000发送请求（红色服务器）首先查看8080自身public静态资源里有没有对应信息 没有 向8080代理服务器发送请求（粉色） 代理服务器 再向5000发请求 5000将信息发送给代理服务器

上面的简易配置缺点 只能定向 向一个服务器发请求5000 每次请求会先查看自身public下是否有对应资源
有的话就直接返回资源 不去访问5000服务器了 所以使用下面的配置

ws:true 和 changeOrigin:true 在Vue中默认都是true React中默认是false
changeOrigin:true 时5000服务器收到的请求url显示的是localhost：5000(假冒自家服务器才能获得资源)
代理服务器 的端口号host 是和前端服务器一致的 所以发送请求时 url 访问8080
路径中 atguigu/students 代表 通过代理服务器去访问另一台 5000端口号的服务器的students资源
配置中通过 pathRewrite 将url中的atguigu 通过正则表达式去掉了
如果url为 http://localhost:8080/students 不加前缀 那么就不执行代理服务器 先访问自己服务器的
pubic文件下是否有 students资源 有直接显示 没有就不显示(实现自由控制是否访问自身的public资源)

bootstrap引入

将bootstrap.css 放到public下的css文件夹中

在index.html中通过 link引入

ES6 传值语法

…对象 就是原封不动的将对象展开并放入

对象={对象1，对象2} 对象1和对象2中的属性对比 1中有2没有的不变 1,2都有1被替换成2

…this.info 的全部数据和…dataObj 的全部数据对比 同名的替换 没有的不更改（按照属性名对比）

如果直接进行赋值 this.info=dataObj 那么 dataObj 是直接替换info对象

dataObj中没传的值 info中就不再显示了 如dataObj只传 errMsg 属性 那么info中只剩errMsg一个属性了

视频播放

在video标签加 controls 就会出现进度条播放按钮

组件插槽slot

在使用组件时可以个性化改变组件结构 添加新的结构

作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

分类：默认插槽、具名插槽、作用域插槽

默认插槽：组件中添加slot标签 在使用组件时 在标签体添加的结构会默认添加到slot插槽处 组件中写多个slot 就会插入多次新结构

父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>
1
2
3
4
5
6
7
8
9
10
11

具名插槽：slot标签添加 name属性 使用组件时在标签中使用slot=“name属性值” 指定添加到的插槽位置

使用template标签时可以使用 v-slot:name属性值 形式

父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
        <Category >
            <div slot="center">html结构3</div>
            <template v-slot:footer>
               <div>html结构4</div>
            </template>
        </Category>
子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

作用域插槽：数据在组件的自身不在使用者身上，使用组件想调用组件中的数据时使用作用域插槽，具体数据生成的结构还是组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定 将数据v-for遍历成 无序结构ul 还是有序结构ol h4标签结构等）

template标签上的scope属性的名scopeData随意 不做规定

组件要将组件中的数据绑定到插槽slot结构中 这样在使用时才可以通过scope来接收到数据

作用域插槽可以搭配具名插槽使用 slot标签添加 name属性

父组件中：
		<Category>
			<template scope="scopeData">
				<!-- 生成的是ul列表 -->
				<ul>
					<li v-for="g in scopeData.games" :key="g">{{g}}</li>
				</ul>
			</template>
		</Category>

		<Category>
			<template slot-scope="scopeData">
				<!-- 生成的是h4标题 -->
				<h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
			</template>
		</Category>
子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
		
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

Vuex

多个组件之间公共的数据 方法 集合地，组件中可以直接调用Vuex中的数据state 和方法actions 和mutations 并可以通过vue开发工具具体查看操作流程

整个vuex作为一个对象 store 组件中调用时 $store.state $store.despatch $store.commit

安装store npm i vuex 默认安装的是vuex4 对应版本vue3

npm i vuex@3 指定安装vuex3 对应版本vue2

新建src/store/index.js 配置store环境

//引入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
export default new Vuex.Store({
   actions,
   mutations,
   state
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在main.js中引入store 创建vm时传入store配置项

   //引入store
   import store from './store'
   ......
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	store
   })
1
2
3
4
5
6
7
8
9
10

在index.js配置actions 和 mutations 的方法 （mutations 同名方法一般取actions 的方法名大写）

在组件中修改Vuex中actions 的方法 $store.dispatch('action中的方法名',数据)

如果不在actions 中做任何操作 可以直接调用 mutations 中的方法 $store.commit('mutations中的方法名',数据)

在actions 中的方法中操作完调用mutations 中的方法 context.commit('mutations中的方法名,value)

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = {
    //响应组件中加的动作
	jia(context,value){
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	},
}

const mutations = {
    //执行加
	JIA(state,value){
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	}
}

//初始化数据
const state = {
   sum:0
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在actions 可以调用actions 中的另一个方法 context.dispatch(‘action中的方法名’,数据)

getters 相当于 computed 就是对 state中数据计算后的新属性 （放在vuex中的公共的计算属性)

根computed 一样使用return返回值形式

组件中调用$store.getters.bigSum

......
const actions = {}

const mutations = {}

const state = {}

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
	getters
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

组件中的computed属性中使用mapState，mapGetters 映射State，Getters中的属性 在HTML中使用时就可以直接调用计算属性名了{{bigSum}} 不用再 {{$store.getters.bigSum}}

使用mapState，mapGetters 要先引用 import {mapState,mapGetters} from ‘vuex’

两种写法 对象写法 可以修改映射名

​ 数据写法 映射前后属性名相同

1. mapState方法：用于帮助我们映射state中的数据为计算属性

   computed: {
       //借助mapState生成计算属性：sum、school、subject（对象写法）
        ...mapState({sum:'sum',school:'school',subject:'subject'}),
            
       //借助mapState生成计算属性：sum、school、subject（数组写法）
       ...mapState(['sum','school','subject']),
   },
   1
   2
   3
   4
   5
   6
   7

2. mapGetters方法：用于帮助我们映射getters中的数据为计算属性

   computed: {
       //借助mapGetters生成计算属性：bigSum（对象写法）
       ...mapGetters({bigSum:'bigSum'}),
   
       //借助mapGetters生成计算属性：bigSum（数组写法）
       ...mapGetters(['bigSum'])
   },
   1
   2
   3
   4
   5
   6
   7

要先引用 import {mapActionsm,mapMutations} from ‘vuex’

用mapActionsm,mapMutations 就不用在methods里写方法 this.$store.dispatch(‘jiaOdd’,this.n)

但上面的触发函数要传参为n 不然默认传参event会报错

1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

   methods:{
       //靠mapActions生成：incrementOdd、incrementWait（对象形式）
       ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
   
       //靠mapActions生成：incrementOdd、incrementWait（数组形式）
       ...mapActions(['jiaOdd','jiaWait'])
   }
   1
   2
   3
   4
   5
   6
   7

2. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

   methods:{
       //靠mapActions生成：increment、decrement（对象形式）
       ...mapMutations({increment:'JIA',decrement:'JIAN'}),
       
       //靠mapMutations生成：JIA、JIAN（对象形式）
       ...mapMutations(['JIA','JIAN']),
   }
   1
   2
   3
   4
   5
   6
   7

Router路由

两种路由的方式

1.router-link标签 (相当于a标签) to 跳转路径

2.编程式路由导航 this.$route.push({name：，query:{ }})

push 有跳转历史 replace 没有跳转历史

安装vue-router，命令：npm i vue-router

新建目录router/index.js

pages下放路由组件 components 下放常规组件

在main.js中引用 import VueRouter from'Vue-router' import router from'./router'

应用插件：Vue.use(VueRouter)

编写 router的index.js

//引入VueRouter
import VueRouter from 'vue-router'
//引入路由组件
import About from '../pages/About'
import Home from '../pages/Home'

//创建并暴露router实例对象，去管理一组一组的路由规则
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/home',
			component:Home
		}
	]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

router-link 实际被解析成 <a 标签 to 为href 跳转目标 加路由组件路径

router-view 为路由组件显示位置

<Banner/>为常规组件显示位置

路由组件切换时，默认是被销毁掉了，被切换的时候再去挂载。

每个路由组件都有自己的$route属性，里面存储着自己的路由信息。

整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

router 里的index.js 添加children配置项

children里的path不加 ‘/’ 使用时会自动加

routes:[
	{
		path:'/about',
		component:About,
	},
	{
		path:'/home',
		component:Home,
		children:[ //通过children配置子级路由
			{
				path:'news', //此处一定不要写：/news
				component:News
			},
			{
				path:'message',//此处一定不要写：/message
				component:Message
			}
		]
	}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

多级路由下的子组件router-link 的 to 路径要写全

路由命名name 多级路由时 添加name属性 跳转时不用path 可以直接使用name（一般多级路由时使用）

{
	path:'/demo',
	component:Demo,
	children:[
		{
			path:'test',
			component:Test,
			children:[
				{
                 name:'hello' //给路由命名
					path:'welcome',
					component:Hello,
				}
			]
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>

<!--简化写法配合传递参数 -->
<router-link 
	:to="{
		name:'hello',
		query:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

query传参 router-link 里的to要绑定属性加";" 路径后加？后key-value传参 &相连

对象写法可以用name query 或者用path query

<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
				
<!-- 跳转并携带query参数，to的对象写法 -->
<router-link 
	:to="{
		path:'/home/message/detail',
		query:{
		   id:666,
          title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

接收（id 和 title 对应query参数名）
$route.query.id
$route.query.title
1
2
3

params传参 要先修改path路径 使用占位符 表示要传递的参数名

router-link 里的to要绑定属性加";" 路径后直接加’/’ 加value传参

对象写法只能用name params 不能用path params

{
	path:'/home',
	component:Home,
	children:[
		{
			path:'news',
			component:News
		},
		{
			component:Message,
			children:[
				{
					name:'xiangqing',
					path:'detail/:id/:title', //使用占位符声明接收params参数 参数名可修改 接收时对应上即可
					component:Detail
				}
			]
		}
	]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
				
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link 
	:to="{
		name:'xiangqing',
		params:{
		   id:666,
            title:'你好'
		}
	}"
>跳转</router-link>
1
2
3
4
5
6
7
8
9
10
11
12
13

接收 (id 和 title 对应path占位符的名字 可修改)
$route.params.id
$route.params.title
1
2
3

props 在路由中添加props 属性 指定传参属性 在接收组件中使用props直接接收即可

引用时不用再$route.query.id

第一种 直接指定传递的属性和值

第二种 把所有params参数都传给子组件 query传参的不行

第三种 通过传入$route 将route中指定参数传给子组件 query和params的都可以

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,

	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
	// props:{a:900}

	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
	props($route){
		return {
			id:$route.query.id,
			title:$route.query.title
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

接收时props声明传递的参数名 引用时直接调用即可

replace属性 router-link里添加 replace 后 使用路由跳转后无法后退 没有浏览历史了

默认跳转方式为push 是有浏览历史了的 可以返回上一个路径

push 是追加历史记录，replace是替换当前记录

编程式路由导航

this.$route.push({name：，query:{ }})

不用route-link 标签了 使用事件触发 调用唯一的router实现路由跳转

this.$router.forward()//前进this.$router.back() //后退
this.$router.go(-2) //可前进或后退 几步

缓存路由组件keep-alive 让不展示的路由组件保持挂载，不被销毁。

从别的组件跳转回来时 组件内数据不会清空而保留不变

添加 include属性指定保留哪个从当前组件实现跳转的子组件的数据

include指定的是组件名! 不是name 是组件文件的大名 News.Vue

路由守卫

对路由加 鉴权 路由跳转的时候鉴权是否进行跳转

分为全局守卫（前置守卫 后置守卫 ） 独享守卫 组件内守卫

多种守卫可以搭配使用

全局守卫 前置守卫 beforeEach 发生路由跳转前调用

​ 后置守卫 afterEach 发生路由跳转后调用 这两个发生跳转都会被调用

独享守卫 beforeEnter 调用某个路由就会触发

组件内守卫 beforeRouteEnter 通过路由规则进入 组件时触发 调用组件触发这个 不离开组件不触发after

  		 afterRouteEnter ``通过路由规则离开``组件时触发  离开当前组件才会被触发
1

组件内守卫在组件内添加 全局守卫，独享守卫在路由配置文件中添加

当直接通过挂载的方式显示组件时不触发 组件内守卫

路由的index配置文件 路由要先声明后暴露

router.beforeEach((to,from,next)=>{ })

to 将要跳转的路由的信息

from 从哪个路由跳转的路由信息

next() 跳转命令 （不加的话 就不会正常跳转到下一个路由）

每个路由可以在meta属性里 添加自己的信息

//全局前置守卫：初始化时执行、每次路由切换前执行
router.beforeEach((to,from,next)=>{
	console.log('beforeEach',to,from)
	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
			next() //放行
		}else{
			alert('暂无权限查看')
			// next({name:'guanyu'})
		}
	}else{
		next() //放行
	}
})

//全局后置守卫：初始化时执行、每次路由切换后执行
router.afterEach((to,from)=>{
	console.log('afterEach',to,from)
	if(to.meta.title){ 
		document.title = to.meta.title //修改网页的title
	}else{
		document.title = 'vue_test'
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

独享路由守卫 在某一个路由下添加 beforEnter 实现针对某一个路由的鉴权

组件内守卫 编辑组件独有的路由规则时使用 只有通过路由规则进入或离开时才触发

ElementUI

安装 npm i element-ui

完整引用 全部引用 文件会比较大

按需引用 安装 npm install babel-plugin-compoent -D

修改 babel.config.js 记得修改红框（ElementUI 里给的配置会报错）

按需引用 只引用使用的组件 名字为组件名大写 不用引入index.css 使用时会自动解析

Vue.component(‘Button.name’,Button) Button.name这个组件名可以修改 和<el-button>相对应

修改过脚手架要重启 npm run serve