# vue_test

**Repository Path**: jingqi1986/vue_test

## Basic Information

- **Project Name**: vue_test
- **Description**: vue模块化教程练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-08
- **Last Updated**: 2025-10-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue2笔记

## 脚手架文件结构：

    |-- node_modules
	|-- public
	|		|-- favicon.ico: 页签图标
	|		|-- index.html: 主页面
	|-- src
	|   |-- assets: 存放静态资源
	|		|		|-- logo.png
	|		|-- component: 存放组件
	|		|		|-- HelloWord.vue
	|		|-- App.vue: 汇总所有组件
	|		|-- main.js: 入口文件
	|-- .gitignore: git版本管制忽略的配置
	|-- babel.config.js: babel的配置文件
	|-- package.json: 应用包配置文件
	|-- README.md: 应用描述文件
	|-- package-lock.json: 包版本控制文件

## 关于不同版本的Vue:

- vue.jsjvue.runtime.xxx.js的区别:
  (1).vue.js是完整版的Vue，包含:核心功能+板解析器。
  (2).vue.runtime.xxx.js是运行版的Vue，只包含:核心功能;没有板解析器。
- 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
  render函数接收到的createElement函数去指定具体内容。

## vue.config.js配置文件

> 1.在package.json中配置
> "inspect": "vue-cli-service inspect"
> 2.在命令行中运行
> npm run inspect > output.js
> 3.查看output.js
> 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

## ref属性

1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
   打标识：`<h1 ref='xxx'>...</h1> 或 <School ref='xxx'></School>`
   获取：this.$refs.xxx$

## 配置项props

功能：让组件接收外部传过来的数据

```
（1）.传递数据：
```

`<Demo name='xxx' />`

```
（2）.接收数据：
```

```
第一种方式（只接收）：
```

```
props:['name']
```

```
第二种方式（限制类型）：
```

```
props:{
```

```
name: Number
```

```
}
```

```
第三种方式（限制类型、限制必要性、指定默认值）：
```

```
props: {
```

```
name: {
```

```
type: String,	//类型
```

```
required: true, //必要性
```

```
default:'老王'	//默认值
```

```
}
```

```
}
```

```
备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
```

```
若业务需求确实需要修改，name请赋值props的内容到data中一份，然后去修改data中的数据。
```

## mixin(混入)

功能：可以把所有组件共有的配置提取成一个混入对象

使用方式：

```
第一步定义混合，例如：
```

除了生命周期，其他正常生成配置
当前页面配置的属性和方法优先级最高

```
{
```

```
data() {...},
```

```
methods: {...}
```

```
}
```

```

```

生命周期不会相互覆盖，一起生效，mixin先于页面的生命周期，其实也可以理解为页面的后执行，（如果有相同方法）可以覆盖mixin的

```
{
```

```
mounted() {}
```

```
}
```

```
第二步使用混入，例如：
```

```
（1）.全局混入：Vue.mixin(xxx)
```

```
（2）.局部混入：mixins:['xxx']
```

## 插件

功能：用于增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

定义插件：

```
对象.install = function (Vue, options) {
```

```
// 1.添加全局过滤器
```

```
Vue.filter(...)
```

```
// 2.添加全局指令
```

```
Vue.directive(...)
```

```

```

```
// 3.配置全局混入（合）
```

```
Vue.mixin(...)
```

```
// 4.添加实例方法
```

```
Vue.prototype.$myMethods = function () {...}
```

```
Vue.prototype.$myProperty = xxx
```

}

使用插件：Vue.use()

## scoped样式

作用：让样式在局部生效，防止冲突。

写法：`<style scoped>`

> <style lang="less"> 需要less-loader
> 但是安装的版本可能与webpack版本不兼容
> 需要npm view webpack versions  查看对应的webpack版本
> 同理npm view less-loader versions 查看less-loader版本
> 安装less-loader指定版本 npm i less-loader@7

## 总结TodoList案例

1. 组件化编码流程：

- （1）.拆分静态组件：组件要按照功能点拆分，命名不要与Html元素冲突。
- （2）.实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
  - 1).一个组件在用：放在组件自身即可。
  - 2).一些组件在用：放在他们共同的父组件上（`<span style="color:red;">`状态提升）
- （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. xxxxxStorage.setItem('key', "value"); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。
		2. xxxxxStorage.getItem('key'); 该方法接受一个键名作为参数，返回键名对应的值。
		3. xxxxxStorage.removeItem('key'); 该方法接受一个键和值作为参数，并把该键名从存储中删除。
		4. xxxxxStorage.clear(); 该方法会情况存储中的所有数据。
	4. 备注：
		1. sessionStorage存储的内容会随着浏览器窗口关闭而消失。
		2. localStorage存储的内容，需要手动清除才会消失。
		3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
		4. JSON.parse(null)的结果依然是null。

## 组件的自定义事件

1. 一种组件间通信的方式，适用于： 子组件==>父组件（谁绑定谁触发，所以兄弟之间无法进行传递）
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：
   1. 第一种方式，在父组件中：`<Demo @atguigu="test" />`或 `<Demo v-on:atguigu="test" />`
   2. 第二种方式，在父组件中：
      `<demo ref="demo" />`
      `......`
      `mounted() {`
      `this.$refs.student.$on("atguigu", this.getStudentName)`
      `}`
   3. 若想让自定义事件只触发一次，可以使用once修饰符，或$once方法。
4. 触发自定义事件：`this.$emit('atguigu', 数据);`
5. 解绑自定义事件：`this.$off('atguigu')`
6. 组件上也可以绑定原生DOM事件，需要使用 `native`修饰符
7. 注意：通过 `this.$refs.xxx.$on("atguigu", 回调)`绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出现问题！

## 全局事件总线（GlobalEventBus）

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 安装全局事件总线：

   `new Vue({  		...  		beforeCreate() {  			Vue.prototype.$bus = this;  // 安装全局事件总线,$bus就是当前应用的vm  		} 		 ... 	 })`
3. 使用事件总线：

   1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。`methods() { 			demo(data) {...}     } 		 ...   	mounted() {   		this.$bus.$on('xxxx', this.demo)   	}`
   2. 提供数据：this.$bus.$emit('xxxxx', 数据)
4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

## 消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于任意组件间通信。
2. 使用步骤：
   1. 安装pubsub: npm i pubsub-js
   2. 引入： import pubsub from 'pubsub-js'
   3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
      `methods() { demo(data) {...}      } 		 ...... mounted() { this.pid = pubsub.subscribe('xxx', this.demo)	// 订阅消息 		 }`
   4. 提供数据：pubsub.publish('xxx',  数据)
   5. 最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)去 `<span style="color:red">`取消订阅。。

## nextTick

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

## Vue封装的过度与动画

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2. 图示：

   Enter													Leave

opacity：0  	--> 	opacity: 1			opacity：1  	--> 	opacity: 0

v-enter					v-enter-to			v-leave						v-leave-to

    v-enter-active											v-leave-active

3. 写法：

   1.准备好样式：

   ·元素进入的样式：

   1.v-enter:进入的起点

   2.v-enter-active:进入过程中

   3.v-enter-to:进入的终点

   ·元素离开的样式：

   1.v-leave:离开的起点

   2.v-leave-active:离开过程中

   3.v-leave-to:离开的终点

   2.使用 `<transition>`包裹要过度的元素，并配置name属性：

   `<transition name="hello" appear>`

   `<h1 class="bg" v-show="isShow">`你好啊！`</h1>`

   `</transition>`

   3.备注：若有多个元素需要过渡，则需要使用：`<transition-group>`，且每个元素都要指定key值。

## vue脚手架配置代理

### 方法一

在vue.config.js中添加如下配置：

`devServer: {   proxy: 'http://localhost:5000' }`

说明：
	1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
	2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
	3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

### 方式二

编写vue.config.js配置具体代理规则：

`module.exports = { 	 devServer: {   	proxy: {   		'/api1': {			// 匹配所有以 '/api1'开头的请求路径     			target: 'http://localhost:5000',		// 代理目标的基础路径     			pathRewrite: {'^/api1':''},					// 把路径中的/atguigu替换为''（主要是针对服务器接收到的url）     			// ws: true,  // 用于支持websocket        默认是true     			// changeOrigin: true // 用于控制请求头中的host值 默认是true    		},    	 '/api2': {				// 匹配所有以 '/api2'开头的请求路径     		target: 'http://localhost:5001',			// 代理目标的基础路径     		pathRewrite: {'^/api2':''},						// 把路径中的/atguigu替换为''（主要是针对服务器接收到的url）     		// ws: true,  // 用于支持websocket        默认是true     		// changeOrigin: true // 用于控制请求头中的host值 默认是true    		},   	} 	} }`

/*
 changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000  // 撒谎
 changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8081  // 不撒谎
 changeOrigin默认值是true
*/

说明：

> 1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
> 2. 缺点：配置略微繁琐，请求资源必须加前缀。

## 插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件。
2. 分类：默认插槽、具名插槽、作用域插槽
3. 使用方式：

   1. 默认插槽：
      父组件：
      `<Category> <div>html结构</div> 		 </Category>`
      子组件：
      `<template> <div> <slot>插槽默认内容</slot> </div> </template>`
   2. 具名插槽：
      父组件：
      `<Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>html结构2</div> </template> </Category>`
      子组件：
      `<template> <div> <slot name="center">插槽默认内容1</slot> <slot name="footer">插槽默认内容2</slot> </div> </template>`
   3. 作用域插槽：

   > 1). 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
   > 2). 具体编码：
   > 父组件：
   > `<Category> <template scope="scopeData"> <ul> <li v-for="(g, index) in scopeData.games" :key="index">{{g}}</li> </ul> </template> </Category> <Category> <template slot-scope="scopeData"> <ul> <li v-for="(g, index) in scopeData.games" :key="index">{{g}}</li> </ul> </template> 				 </Category>`
   > 子组件：
   > `<template> <div> <slot :games="games"></slot> </div>	     </template> <script> export default { name: "Category", props: ['title'], data() { return { games: ['红色警戒', '穿越火线', '劲舞团', '超级玛丽'] } } } </script>`
   >

## Vuex

### 1.概念

> 1. 在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
> 2. Github地址：https://github.com/vuejs/vuex

### 2.何时使用？

> 1. 多个组件依赖于同一状态
> 2. 来自不同组件的行为需要变更同一状态

### 3.搭建Vuex环境

> 2022年以后Vue最新版本是Vue3，与之对应的VueX是Vuex4
> 2022年之前Vue最新版本是Vue2，与之对应的VueX是Vuex3	npm i vuex@3

1. 创建文件：	src/store/index.js
   ```javascript
   // 该文件用于创建Vuex中最为核心的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 = {};  
   /*    const store = new Vuex.Store({  
   	// actions: actions,  
   	// mutations: mutations,  
   	// state: state  
   	actions,   
   	mutations,  
   	state  
   })  
   // 导出或暴露store  
   export default store  
   */  
   // 创建 导出或暴露store  
   export default new Vuex.Store({  
   	actions,  
   	mutations,  
   	state  
   })
   ```
2. 在main.js中创建vm时传入store配置项
   ```javascript
   import store from "./store"
   // 创建vm
   new Vue({
   	el: "#app",
   	render: h => h(App),
   	// store: "hello",
   	// 只有Vue.use(Vuex)后才能生效
   	store,
   	beforeCreate() {
   		Vue.prototype.$bus = this
   	}
   });
   ```

### 4.基本使用

1. 初始化数据、配置actions、配置mutations，操作文件store.js

```javascript
    // 引入Vue
    import Vue from "vue"
    // 引入Vuex
    import Vuex from "vuex"

    // 使用Vuex
    Vue.use(Vuex);

    // 准备actions——用于响应组件中的动作
    // context参数 表示当前的上下文的内容，方便获取数据（比如获取数据的过程较为复杂，需要多次调取接口和计算）
    // value参数 ：用于接收传递的参数  在actions中，可以传递参数，参数通过value接收，但是尽量不要直接修改state里面的数据，而是通过mutations来修改state的数据
  
    const actions = {
	jiaOdd(context, value) {
		console.log("actions中的jiaOdd被调用了", context, value);
		console.log("处理了一些事情---jiaOdd");
		context.dispatch("demo1", value);
	},
	demo1(context, value) {
		console.log("处理了一些事情---demo1");
		context.dispatch("demo2", value);
	},
	demo2(context, value) {
		console.log("处理了一些事情---demo1");
		if(context.state.sum % 2) {
			context.commit("JIA", value);
			// context.state.sum += value;   // 乱拳打死老师傅
		}
	},
	jianWait(context, value) {
		console.log("actions中的JIANWAIT被调用了", context, value);
		setTimeout(() => {
			context.commit("JIAN", value);
		}, 1000);
	},
    };

    // 准备mutations——用于操作数据（state）
    const mutations = {
	JIA(state, value) {
		console.log("mutations中的JIA被调用了", state, value);
		state.sum += value
	},
	JIAN(state, value) {
		console.log("mutations中的JIAN被调用了", state, value);
		state.sum -= value
	},
    };

    // 准备state——用于存储数据
    const state = {
	sum: 0
    };

    // 创建 导出或暴露store
    export default new Vuex.Store({
	actions,
	mutations,
	state
    })
```

2.组件中读取vuex中的数据：`$store.state.sum`

3.组件中修改vuex中的数据：`$store.dispatch('action中的方法名'，数据)`或`$store.commit('mutations中的方法名'，数据)`

  备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，既不写`dispatch`，直接编写`commit`

### 5.getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。

2. 在store.js中追加getters配置
```javascript
    ......
    const getters = {
    	bigSum(state) {
				return state.sum * 10
			}
    }

    // 创建 导出或暴露store
    export default new Vuex.Store({
    	......
			getters
    })
```

3. 组件中读取数据：`$store.getters.bigSum`

### 6.四个map方法的使用

1. mapState方法：用于帮助我们映射`state`中的数据为计算属性
```javascript
  computed: {
    // 借助mapState生产计算属性，从state中读取数据（对象写法）
    // ...mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'}),
    // 借助mapState生产计算属性，从state中读取数据（数组写法）
    // ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),
    ...mapState(['sum', 'school', 'subject']),
  },
```

2. mapGetters方法：用于帮助我们映射`getters`中的数据为计算属性
```javascript
  computed: {
    // 借助mapGetters生产计算属性，从getters中读取数据（对象写法）
    // ...mapGetters({bigSum: 'bigSum'})
    // 借助mapGetters生产计算属性，从getters中读取数据（数组写法）
    ...mapGetters(['bigSum'])
  },
```

3. mapActions方法：用于帮助我们生产与`actions`对话的方法，即：包含`$store.dispatch(xxx)`的函数
```javascript
  methods: {
    // 靠mapActions生成：incrementOdd、incrementWait（对象写法）
    ...mapActions({incrementOdd: 'jiaOdd', incrementWait:'jiaWait' })
    // 靠mapActions生成：incrementOdd、incrementWait（数组写法）
    ...mapActions(['jianOdd', 'jianWait'])
  },
```

4. mapMutations方法：用于帮助我们生产与`mutations`对话的方法，即：包含`$store.commit(xxx)`的函数
```javascript
  methods: {
    // 靠mapMutations生成：incrementOdd、incrementWait（对象写法）
    ...mapMutations({incrementOdd: 'jiaOdd', incrementWait:'jiaWait' })
    // 靠mapMutations生成：'JIA'、'JIAN'（数组写法）
    ...mapMutations(['JIA', 'JIAN'])
  },
```
  备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

### 7.模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确。
   
2. 修改store.js
   
```javascript
	const countOptions = {
    namespaced: true,		// 开启命名空间
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {
			bigSum(state) {
				return state.sum * 10
			}
		}
	}
	
	const personOptions = {
    namespaced: true,		// 开启命名空间
    actions: {...},
    mutations: {...},
    state: {...}
	}

	const store = new Vuex.Store({
    modules: {
			countAbout: countOptions,
			personAbout: personOptions
			/* countOptions,
			personOptions */
		}
	})
```

3. 开启命名空间后，组件中读取state数据：

```javascript
  // 方式一：自己直接读取
  this.$store.state.personAbout.list

  // 方式二：借助mapState读取
  ...mapState('countAbout', ['sum', 'school', 'subject']),
```

4. 开启命名空间后，组件中读取getters数据：

```javascript
  // 方式一：自己直接读取
  this.$store.getters['personAbout/firstPersonName']

  // 方式二：借助mapGetters读取
  ...mapGetters('countAbout', ['bigSum'])
```
5. 开启命名空间后，组件中读取dispatch数据：

```javascript
  // 方式一：自己直接dispatch
	this.$store.dispatch("personAbout/addPersonWang", personObj);

  // 方式二：借助mapActions读取
	...mapActions('countAbout', {increamentOdd: "jiaOdd", increamentWait: "jianWait"})
```

6. 开启命名空间后，组件中读取commit数据：

```javascript
  // 方式一：自己直接commit
	this.$store.commit("personAbout/ADD_PERSON", personObj);

  // 方式二：借助mapMutations读取
	...mapMutations('countAbout', {increament: "JIA", decreament: "JIAN"}),
```

## 路由

> 1.理解：一个路由（route）就是一组映射关系（key-value），多个路由需要路由器（router）进行管理。
> 2.前端路由：key是路径，value是组件。

### 1.基本使用

> 2022年以后Vue最新版本是Vue3，与之对应的vue-router是Vue-router4
> 2022年之前Vue最新版本是Vue2，与之对应的Vue-router是Vue-router3	npm i vue-router@3

1. 安装vue-router，命令：npm  i vue-router
2. 应用插件：Vue.use（VueRouter）
3. 编写router配置项：
```javascript
  // 引入VueRouter
  import VueRouter from 'vue-router'
  // 引入组件
  import About from "../components/About"
  import Home from "../components/Home"

  // 创建一个路由器
  const router = new VueRouter({
    routes: [
      {
        path:'/about',
        component:About
      },
      {
        path:'/home',
        component:Home
      }
    ]
  })

  export default router
```

4. 实现切换（active-class可配置高亮样式）

  `<router-link class="list-group-item" active-class="active" to="/about" >`About `</router-link>`

5. 指定展示位置

  `<router-view></router-view>`

### 2.几个注意点

> 1.路由组件通常存放在pages文件夹，一般组件通常存放在component文件夹。
> 
> 2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
> 
> 3.每个组件都有自己的$route属性，里面存储着自己的路由信息。
> 
> 4.整个应用只有一个router，可以通过组件的$router属性获取到。

### 3.多级路由（嵌套路由）

1. 配置路由规则，使用children配置项：

```javascript
  routes: [
    {
      path:'/about',
      component: About
    },
    {
      path:'/home',
      component: Home,
      children: [							// 通过children配置子级路由
        {
          path: 'news',			  // 此处一定不要写， /news
          component: News
        },
        {
          path: 'message',		// 此处一定不要写， /message
          component: Message
        }
      ]
    }
  ]
```

2. 跳转（要写完整路径）：

  `<router-link class="list-group-item" active-class="active" to="/home/news">`News `</router-link>`

### 4.路由的query参数

1. 传递参数：

```javascript
  <!-- 跳转路由并携带query参数，to的字符串写法 -->
  <router-link :to="`/home/message/details?id=${msg.id}&title=${msg.title}`" >`{{msg.title}}`</router-link>

  <!-- 跳转路由并携带query参数，to的对象写法 -->
  <router-link :to="{
    path:`/home/message/details`,
    query: {
      id: msg.id,
      title: msg.title
    }
  }">
  {{msg.title}}
  </router-link>
```

2. 接收参数：

  `$route.query.id`
  `$route.query.title`

### 5.命名路由

1. 作用：可以简化路由的跳转。

2. 如何使用

  1. 给路由命名：
```javascript
  {
    path:'/home',
    component: Home,
    children: [      // 通过children配置子级路由
      {
        name: "news",		// 给路由命名
        path: "news",
        component: News
      },
      {
        name: "message",		// 给路由命名
        path: "message",
        component: Message,
        children: [
          {
            name: "xiangqing",		// 给路由命名
            path: "details",
            component: Details
          }
        ]
      }
    ]
  }
```
  2. 简化跳转：
```javascript
  <!-- 简化前，需要写完整的路径 -->
  <router-link to="/home/message/details" >`跳转 `</router-link>

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

  <!-- 简化写法配合传递参数 -->
  <router-link :to="{
    name: 'xiangqing',
    query: {
      id: msg.id,
      title: msg.title
    }
  }" >跳转`</router-link>
```

### 6.路由的params参数

1. 配置路由，声明接收params参数
```javascript
  {
    path:'/home',
    component: Home,
    children: [      // 通过children配置子级路由
      {
        path: 'news',   // 此处一定不要写， /news
        component: News
      },
      {
        path: 'message', // 此处一定不要写， /message
        component: Message,
        children: [
          {
            name: "xiangqing", // 给路由命名
            path: "details/:id/:title", // 此处一定不要写， /details/:id/:title
            component: Details
          }
        ]
      }
    ]
  }
```

2. 传递参数
```javascript
  <!-- 跳转路由并携带params参数，to的字符串写法 -->
  <router-link :to="`/home/message/details?id=${msg.id}&title=${msg.title}`" >`跳转 `</router-link>
  <router-link :to="`/home/message/details/${msg.id}/${msg.title}`" >`跳转 `</router-link>

  <!-- 跳转路由并携带params参数，to的对象写法 -->
  <!-- path: '/home/message/details' 不被支持 -->

  <router-link :to="{
    name: 'xiangqing',
    params: {
      id: msg.id,
      title: msg.title
    }
  }" >
  跳转
  </router-link>
```
  > 特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：

  `$route.params.id`
  `$route.params.title`

### 7.路由的props配置

> 作用：让路由组件更方便的收到参数
```javascript
  {
    name: "xiangqing", // 给路由命名
    // path: "details/:id/:title",
    path: "details",
    component: Details,
    // 纯静态数据
    // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
    // props: {a:1, b:'hello'}

    // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
    // props: true

    // props的第三种写法，值为函数。
    // props($route) {
    //   return {id:$route.query.id, title:$route.query.title}
    // }

    // props({query}) {
    //   return {id:query.id, title:query.title}
    // }

    props({params: {id, title}}) {
      return {id:id, title:title}
    }
  }
```

### 8.`<router-link>`的replace属性

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：分别为`push`和`replace`，`push`是追加历史记录，`replace`是替换当前记录。路由跳转时候默认为`push`
   
3. 如何开启replace模式：`<router-link replace ......>News</router-link>`

### 9.编程式路由导航

1. 作用：不借助`<router-link>`实现路由跳转，让路由跳转更加灵活

2. 具体编码：
```javascript
  // $router的两个API
  this.$router.push({
    name: 'xiangqing',
    query: {
      id: msg.id,
      title: msg.title
    }
  })

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

  this.$router.back()		// 后退
  this.$router.forward()  // 前进
  this.$router.go(-2)		// 可前进也可后退
```

### 10.缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：
```html
    <!-- 
      缓存视图
      include属性配置项是组件名 组件名 组件名
      多个缓存组件 用动态绑定数组形式
      不配置include  表示缓存所有
    -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>

    <keep-alive :include="['News', 'Message']">
      <router-view></router-view>
    </keep-alive>
```

### 11.两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
 
2. 具体名字：
    1. activated路由组件激活时触发

    2. deactivated路由组件失活时触发

### 12.路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫
    1. 全局守卫：
    ```javascript
      router.beforeEach((to, from, next) => {
        console.log("前置路由守卫", to, from)
        if(to.meta.isAuth) {   // 判断当前路由是否需要进行权限控制
          if(localStorage.getItem("school") === "aiguigu") { // 权限控制的具体规则
            // document.title = to.meta.title || "硅谷系统"   // 由后置守卫处理 
            next() // 放行
          } else {
            alert("学校名不对，无权限查看")
          }
        } else {
          // document.title = to.meta.title || "硅谷系统"   // 由后置守卫处理
          next()  // 放行
        }
      })

      // 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
      router.afterEach((to, from) => {
        console.log("后置路由守卫", to, from)
        document.title = to.meta.title || "硅谷系统"
      })
    ```

    2. 独享守卫：
    ```javascript
      beforeEnter(to, from, next) {
        if(localStorage.getItem("school") === "aiguigu") { // 权限控制的具体规则
          document.title = to.meta.title || "硅谷系统"
          next() // 放行
        } else {
          alert("学校名不对，无权限查看")
        }
      }
    ```

    3. 组件内守卫：
    ```javascript
      // 进入守卫，通过路由规则，进入该组件时被调用
      // 直接写组件标签是不会触发的
      beforeRouteEnter(to, from, next) {
        ...
      },

      // 离开守卫，通过路由规则，离开该组件时被调用
      beforeRouteLeave(to, from, next) {
        ...
      }
    ```

### 13.路由器的两种工作模式

 1. 对于一个url来说，什么是hash值？——#及其后面的内容就是hash值。

 2. hash值不会包含在HTTP请求中，即：hash值不会带给服务器。

 3. hash模式：

    1. 地址中永远带着#号，不美观。

    2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。

    3. 兼容性较好。

4. history模式：

    1. 地址干净，美观。

    2. 兼容性和hash模式相比略差。

    3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。
      > 配置后端路由，将所有请求都映射到index.html（比如：Vue单页应用）。                     
      ```javascript
      import history from 'connect-history-api-fallback';
      app.use(history()); 
      ```