尚硅谷Vue2学习笔记 (二)

脚手架文件结构

node_modules
public
    favicon.ico 页签图标
    index.html 主页面
src
    assets 存放静态资源
        logo.png 
    component 存放组件
        HelloWorld.vue
    App.vue 汇总所有组件
    main.js 入口文件
.gitignore git版本管理忽略文件
babel.config.js babel配置文件 (ps:babel可以将es6+语法转换为浏览器兼容的语法)
package.json 应用包配置文件
README.md 应用描述文件
package.lock.json 包版本控制文件

不能改的目录名及文件名：public、favicon.ico、index.html、src、main.js
不能改的目录名及文件名：public、favicon.ico、index.html、src、main.js

关于不同版本的Vue的说明

• vue.js 与 vue.xxx.js的区别：
  vue.js是完整版的Vue，包含：核心功能+模板解析器
  vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器

• 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容

• ps：开发的时候需要模板解析器，上线的时候不再需要模板解析器，所以vue提供了精简版的运行版Vue，可以减少打包后的体积，节省空间

vue.config.js配置文件

vue inspect > output.js 查看webpack.config.js文件的配置(只读)

ref属性

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

配置项props

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

1.传递数据

<Demo name="xxx" age="xxx"> // 此时，xxx是字符串
<Demo :name="yyy" :age="yyy"> // 此时，yyy是js表达式

2.接收数据

第一种方式(只接收)

props: ['name', 'age']

第二种方式(限制数据类型)

props: {
    name: String,
    age: Number
}

第三种方式(限制数据类型、限制必要性、指定默认值)

props: {
    name: {
        type: String, // 类型
        required: true // 必要性
    }
    age: {
        type: Number,
        default: 99 // 默认值
    }
}

备注：

1. props是只读的，Vue底层会监测对props的修改，如果进行了修改，就会发出警告；
   若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去data中修改
2. 通过props接收到的数据，优先级比data中的数据高，如果同时指定props和data中的同名数据，会优先显示props传过来的

mixin(混入/混合)

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

• 使用方式：

1. 定义混合，并暴露，例如：

export const mixin = {
    data() {...},
    methods: {...},
    ...
}

2. 导入使用混合，例如：

// 导入混合
import { xxx } from '文件路径'

• 使用混合——全局混入

Vue.mixin(xxx)

• 使用混合——局部混入

mixins: ['xxx']

插件plugins

• 功能：用于增强Vue

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

• 定义插件(别忘了暴露出去)：

对象.install = function(Vue, options) {
    // 可以添加全局过滤器
    Vue.filter(...)

    // 可以添加全局指令
    Vue.directive(...)

    // 可以配置全局混入
    Vue.mixin(...)

    // 可以给Vue原型上添加方法、属性
    Vue.prototype.方法名 = function() {}
    Vue.prototype.属性名 = xxx
}
export { 对象 }

// 简写
export default {
    install() {
        ...
    }
}

• 引入、使用插件

import xxx from '文件路径' // 默认导出的导入
import { xxx } from '文件路径' // 命名导出的导入

Vue.use(xxx)

scoped样式

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

• 写法：<style scoped></style>

TodoList案例

组件化编码流程

1. 拆分静态组件

通常按照功能点来拆分组件，命名不要与html元素冲突

2. 实现动态组件

• 数据的类型、名称是什么？
  对象数组(对象属性：id、事情名称、是否完成)

• 数据存放位置？

  (1). 一个组件在用：放在组件自身即可

  (2). 一些组件在用：放在它们共同的父组件上(状态提升)

3. 实现交互：从绑定事件开始

注意点

• props适用于：

  父组件 ==> 子组件 通信

  子组件 ==> 父组件 通信(要求父组件先给子组件一个函数)

  目前所学知识只能支持从父组件传递数据给子组件(props)
  ！但可以通过以下方式从子组件传递数据给父组件：
  第一步：父组件传递一个函数rec给子组件，子组件通过props接收，这个函数就会出现在子组件实例对象上
  第二步：子组件可以调用rec函数，将想要传递给父组件的数据作为参数传给父组件

• 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的

• props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

webStorage

1. 存储内容大小一般支持5MB左右(不同浏览器可能不一样)

2. 浏览器端通过 window.sessionStorage 和 window.localStorage 属性来实现本地存储机制

3. 相关API：

   • xxxxxStorage.setItem('key', 'value')

   该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值

   • xxxxxStorage.getItem('key')

   该方法接收一个键名作为参数，返回键名对应的值

   • xxxxxStorage.removeItem('key')

   该方法接收一个键名作为参数，并把该键名从存储中删除

   • xxxxxStorage.clear()

   该方法会清空存储中所有数据

   ​

4. 备注

   • sessionStorage存储的内容会随着浏览器窗口关闭而消失

   • localStorage存储的内容，需要手动清除才会消失，不会随着浏览器窗口关闭而消失

   • xxxxxStorage.getItem('key') 如果key对应的value获取不到，那么getItem的返回值是null

   • 存储对象类型的数据时，需要先转换成JSON字符串再存储：

     xxxxxStorage.setItem('key', JSON.stringify(obj))

   • 读取对象类型的数据时，需要将读取出来的JSON字符串转换成对象类型：JSON.parse(xxxxxStorage.setItem('key'))

   • JSON.parse(null) 的结果依然是null

组件的自定义事件

1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件**(事件回调在A中**)

3. 绑定自定义事件：

• 第1种方式：在父组件中：

<子组件名 v-on:自定义事件名="事件回调函数" /> 
<子组件名 @自定义事件名="事件回调函数" /> // 简写

• 第2种方式：在父组件中：

<子组件名 ref="demo" />
...
mounted() {
    this.$refs.demo.$on('自定义事件名', this.事件回调函数名)
}
// 注意事件回调要写在methods里，不能写在$on方法中，因为this会指向子组件实例对象，除非用箭头函数

• 若想让自定义事件只能触发一次，可以使用once事件修饰符，或$once方法

<子组件名 @自定义事件名.once="事件回调函数" /> // once修饰符
this.$refs.demo.$on('自定义事件名', this.事件回调函数名) // $once方法

4. 触发自定义事件(在子组件中触发)

this.$emit('自定义事件名', 数据)

5. 解绑自定义事件

this.$off('自定义事件名') // 解绑1个自定义事件
this.$off(['自定义事件1', '自定义事件2', ...]) // 解绑多个自定义事件
this.$off() // 解绑组件的所有自定义事件

6. 组件上也可以绑定原生DOM事件，需要使用native事件修饰符，否则会被解析为自定义事件
7. 再次注意：通过this.$refs.子组件名.$on('自定义事件名', 事件回调) 绑定自定义事件时，回调函数要么配置在methods中，要么直接箭头函数在$on方法里写，否则this指向会出问题！

全局事件总线

1. 一种组件间通信的方式，适用于任意组件间通信

2. 安装全局事件总线：

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

3. 使用事件总线

• 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调函数留在A组件自身

methods: {
    demo(data) {}
},
...
mounted() {
    this.$bus.$on('事件名', this.demo)
}

• 提供数据

this.$bus.$emit('事件名', 数据)

4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

beforeDestroy() {
    this.$bus.$off('事件名')
}

消息订阅与发布(pubsub)

1. 一种组件间通信的方式，适用于任意组件间通信

2. 使用步骤：

• 安装pubsub： npm i pubsub

• 引入：import pubsub from 'pubsub-js'

• 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调函数留在A组件自身

methods: {
    demo(data) {}
}
...
mounted() {
    this.pid = pubsub.subscribe('消息名', this.demo) // 订阅消息
}

• 提供数据： pubsub.publish('消息名', 数据)

3. 最好在beforeDestroy钩子中，用 pubsub.unsubscribe(pid) 取消订阅

nextTick

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

Vue封装的过渡与动画

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素增加样式类名
2. 过渡写法：

• 准备好样式

  元素进入的样式

  v-enter 进入的起点

  v-enter-active 进入过程中

  v-enter-to 进入的终点

  元素离开的样式

  v-leave 离开的起点

  v-leave-active 离开过程中

  v-leave-to 离开的终点

• 使用 <transition> 包裹要过渡的元素，并配置name属性

<transition name="hello">
	<h1 v-show="isShow">你好啊</h1>
</transition>

• 备注：若有多个元素需要过渡，需要使用 <transition-group> 包裹，且每个元素都要指定key值

3. 动画写法：

只需要指定 v-enter-active 和 v-leave-active 的样式以及定义动画：

@keyframes 动画名 {
    from{
        ...
    }
    to {
        ...
    }
}

发Ajax请求的几种方式：

1. XMLHttpRequest
2. jQuery(封装xhr)
3. axios(封装xhr)
4. fetch
5. vue-resource(封装xhr)

Vue cli(脚手架)配置代理

方法一

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

devServer: {
	// 请求的url
    proxy: "http://localhost:5000"
}

• 说明：

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

方法二

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

module.exports = {
    ...
    devServer: {
        proxy: {
            '/api1': { // 匹配所有以 '/api1' 开头的请求路径
                target: 'http://localhost:5000', // 代理目标的基础路径
                pathRewrite: {'^/api1': ''},
                ws: true, // 用于支持websocket
                changeOrigin: true // 用于控制请求头中的host值
            },

            '/api2': { // 匹配所有以 '/api2' 开头的请求路径
                target: 'http://localhost:5001', // 代理目标的基础路径
                pathRewrite: {'^/api2': ''}, 
                ws: true, // 用于支持websocket
                changeOrigin: true // 用于控制请求头中的host值
            }
        }
    }
}

/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（被请求的服务器的host）
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080（实际的host）
changeOrigin默认值为true
*/

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

注意：前端发送请求时，url要写代理服务器的主机名和端口 + 请求的具体路径 (例如 /students)，

如果用第二种方式配置代理服务器还要加上前缀 (例如 http://localhost:8080/api1/students)

插槽

1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信方式

   适用于 父组件 ===> 子组件

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

3. 使用方式

• 默认插槽

// 父组件中：
<Category>
	<div>html结构</div>
</Category>

// 子组件中：
<template>
	<div>
		<!-- 定义插槽 -->
     	<slot>插槽默认内容</slot>
	</div>
</template>

• 具名插槽

// 父组件中：
<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>

• 作用域插槽

  理解：数据在组件本身，当根据数据生成的结构需要组件的使用者来决定。

  (games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

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

    <template slot-scope="scopeData">
        <!-- 生成的是h4列表 -->
        <h4 v-for="(g, index) in scopeData.games" :key="index">{{g}}</h4>
    </template>
</Category>

// 子组件中：
<template>
    <div>
        <!-- 定义插槽 -->
        <slot :games="games">插槽默认内容</slot>
    </div>
</template>

<script>
    export default {
        name: 'Category',
        props: ['title'],
        data() {
            return {
                // 数据在子组件自身
                games: ['红色警戒', '和平精英', '羊了个羊', '合成大西瓜'],
            }
        }
    }
</script>

备注：作用域插槽也可以起名name

vuex

**概念：**专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信

应用场景：多个组件需要共享数据时(多个组件依赖于同一状态、来自不同组件的行为需要变更同一状态)

搭建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
export default new Vuex.Store({
    actions,
    mutations,
    state
})

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

...
// 引入store
import store from './store'

// 创建vm
new vue({
    el: '#app',
    render: h => h(App),
    store,
})

基本使用

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

// 引入vue
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)

// 准备actions——用于响应组件中的动作
const actions = {
    incrementOdd(context, value) {
        if (context.state.sum % 2) {
            context.commit('INCREMENTODD', value)
        }
    },
}
// 准备mutations——用于操作数据(state)
const mutations = {
    INCREMENTODD(state, value) {
        state.sum += value
        
    },
}
// 准备state——用于存储数据
const state = {
    sum: 0 // 和
}

2. 组件中读取vuex中的数据：$store.state.变量名

3. 组件中修改vuex中的值：￥store.dispatch('actions中的方法名', 数据) 或 $store.commit('mutations中的方法名', 数据)

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

getters的使用

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

2. 在 src/store/index.js 中追加 getters 配置

   ......
   
   const getters = {
       bogSum() {
           return state.sum * 10
       }
   }
   
   // 创建并导出store
   export default new Vuex.Store({
       ...
       getters,
   })
   

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

4个map方法的使用

1. mapState方法：用于映射 State 中的数据为计算属性

   import { mapState } from 'vuex'
   ...
   computed: {
       ...
       // 借助mapState生成计算属性，从state中读取数据(对象写法)
       ...mapState({he: 'sum', xuexiao: 'school', xueke: 'subject'}),
   
       // 借助mapState生成计算属性，从state中读取数据(数组写法)
       ...mapState(['sum', 'school', 'subject']),	
   }
   

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

   import { mapGetters } from 'vuex'
   ...
   computed: {
       // 借助mapGetters生成计算属性，从getters中读取数据(对象写法)
       ...mapGetters({bigSum: 'bigSum'})
       
       // 借助mapGetters生成计算属性，从getters中读取数据(数组写法)
       ...mapGetters(['bigSum'])
   }
   

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

   import { mapActions } from 'vuex'
   ...
   methods: {
       // 借助mapActions生成对应方法，方法中会调用dispatch去联系actions(对象写法)
      	...mapActions({jiaOdd: 'incrementOdd', jiaWait: 'incrementWait'}),
   
       // 借助mapActions生成对应方法，方法中会调用dispatch去联系actions(对象写法)
       ...mapActions(['incrementOdd', 'incrementWait']),
   }
   

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

   import { mapMutations } from 'vuex'
   ...
   methods: {
       // 借助mapMutations生成对应方法，方法中会调用commit去联系mutations(对象写法)
       ...mapMutations({increment: 'INCREMENT', decrement: 'DECREMENT'}),
   
       // 借助mapMutations生成对应方法，方法中会调用commit去联系mutations(对象写法)
       ...mapMutations(['INCREMENT', 'DECREMENT']),
   }
   

   注意：mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象

模块化+命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确

2. 修改 store.js

   const countAbout = {
       namespaced: true, // 开启命名空间
       state: {...},
       actions: {...},
       mutations: {...},
       getters: {
           bigSum() {
               return state.sum * 10
           }
       },
   }
   
   const personAbout = {
       namespaced: true, // 开启命名空间
       state: {...},
       actions: {...},
       mutations: {...},
       getters: {...},
   }
   
   const store = new Vuex.Store({
       modules: {
           countAbout, // 对象属性简写机制
           personAbout
       }
   })
   
   

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

   // 方式一：直接读取state
   this.$store.state.countAbout.sum
   this.$store.state.countAbout.school
   this.$store.state.countAbout.subject
   
   // 方式二：借助mapState
   ...mapState('countAbout', ['sum', 'school', 'subject'])
   

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

   // 方式一：直接读取getters
   this.$store.getters['countAbout/bigSum']
   // 方式二：借助mapGetters
   ...mapGetters('countAbout', ['bigSum'])
   

5. 开启命名空间后，组件中调用dispatch

   // 方式一：直接dispatch
   this.$store.dispatch('countAbout/incrementOdd', this.n)
   this.$store.dispatch('countAbout/incrementWait', this.n)
   // 方式二：借助mapActions
   ...mapActions('countAbout', ['incrementOdd', 'incrementWait'])
   

6. 开启命名空间后，组件中调用commit

   methods: {
       // 方式一：直接commit
       this.$store.commit('countAbout/INCREMENT', this.n)
       this.$store.commit('countAbout/DECREMENT', this.n)
       // 方式二：借助mapMutations
       ...mapActions('countAbout', {increment: 'INCREMENT', decrement: 'DECREMENT'})
   }
   

路由

概念

路由 (route)

路由就是一组 key-value 的对应关系，key为路径，value为 function 或 component

多个路由 (route) 需要经过路由器 (router) 的管理

路由分类

1. 后端路由

   value 是 function，用于处理客户端处理的请求

   工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

2. 前端路由

   value 是 component，用于展示页面内容

   工作过程：当浏览器的路径改变时，对应的组件就会显示

   ​

vue-router

vue的一个插件库，专门用来实现SPA应用(单页面应用)

对SPA应用的理解：

1. 单页Web应用(single page web application, SPA)
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

基本使用

1. 安装vue-router，npm i vue-router@3

2. 在 src/router/index.js 下编写router配置项

   // 引入VueRouter
   import VueRouter from 'vue-router'
   
   // 引入组件
   import Home from '../components/Home'
   import Home from '../components/Home'
   
   // 创建并导出router实例对象，管理一组一组的路由规则
   export default new VueRouter({
       routes: [
           {
               path: '/home',
               component: Home
           },
           {
               path: '/about',
               component: About
           }
       ]
   })
   

3. 在main.js 中引入并应用插件，引入配置好的路由器：

   import VueRouter from 'vue-router'

   Vue.use(VueRouter)

   import router from './router'

4. 实现切换（active-class可配置切换样式、to配置url）

   <router-link active-class="active" to="/about">About</router-link>
   

5. 指定组件展示位置

   <router-view></router-view>
   

几个注意点：

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

嵌套路由（多级路由）

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

   routes: [
   	{
           path: '/home',
           component: Home
           children: [
               {
                   path: 'news', // 不要写 / 
                   component: News
               },
               {
                   path: 'message', // 不要写 / 
                   component: Message
               }
           ]
       },
       {
           path: '/about',
           component: About,
       },
   ]
   

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

   <router-link to="/home/news">News</router-link>
   <router-link to="/home/message">Message</router-link>
   

   ​

路由的query参数

1. 传递参数

   <!-- 跳转路由并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">查看消息</router-link>
   
   <!-- 跳转路由并携带query参数，to的对象写法 -->
   <router-link :to="{
       path: '/home/message/detail',
       query: {
           id: m.id,
           title: m.title
       }
   }">查看消息</router-link>
   

2. 接收参数

   ...
   <li>消息的编号：{{$route.query.id}}</li>
   <li>消息的标题：{{$route.query.title}}</li>
   

   ​

命名路由

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

2. 如何使用

   1. 给路由命名，再 src/router/index.js 中配置

      {
          path: '/demo',
          component: Demo,
          children: [
              {
                  path: 'test',
                  component: Test,
                  children: [
                      {
                          name: 'hello', // 给路由命名
                          path: 'welcome',
                          component: Hello,
                      }
                  ]
              } 
          ]
      }
      

   2. 简化跳转

      <!-- 简化前，需要写完整的路径 -->
      <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>
      

路由的params参数

1. 配置路由

   routes: {
      path: '/home',
      component: Home,
      children: [
          {
              path: 'news',
              component: News
          },
          {
              path: 'Message',
              component: Message,
              children: [
                  {
                      name: 'xiangqing',
                      path: 'detail/:id/:title', // 使用占位符声明接收params参数
                      component: Detail
                  }
              ]
          }
      ]
   }
   

   ​

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参数只能用name，不能用path
       params: {
           id: m.id,
           title: m.title
       }
   }"
   >{{m.title}}</router-link>
   

   特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置项

   ​

3. 接收参数
   $route.params.id
$route.params.title

路由的props配置

作用：让路由组件更加方便地收到参数

{
    name: 'xiangqing',
    path: 'detail/:id/:title',
    component: Detail,
    
    // 第1种写法，props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
    props: {a: 1, b: 'hello'},
    
    // 第2种写法，props值为布尔值，把路由收到的所有params参数通过props传给Detail组件
    props: true,
    
    // 第3种写法，props值为函数，该函数返回的对象中每一组key-value组合都会通过props传给Detail组件
    props($route) {
        return {
            id: $route.query.id,
            title: $route.query.title
        }
    },
    
    //利用解构赋值
    props({query}) {
    	return {id: query.id, title: query.title}
    },

    // 不推荐(可读性差)
    props({query: {id, title}}) {
        return {id, title}
    },
}

router-link 的 replace 属性

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

2. 浏览器的历史记录有2种写入方式：push 和 replace，push 是追加历史记录，replace 是替换当前记录，路由跳转时默认为 push

3. 如何开启 replace 模式：

   <!-- 完整写法 -->
   <router-link :replace="true" ......>About</router-link>
   
   <!-- 简写 -->
   <router-link replace ......>Home</router-link>
   

   ​

编程式路由导航

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

2. 代码：

   // push跳转
   this.$router.push({
       name: 'xiangqing',
       params: {
           ...
       },
   })
   
   // replace跳转
   this.$router.replace({
       path: '/home/message/detail',
       params: {
       	...
   	}
   })
       
   // forward前进
   this.$router.forward()
   
   // back后退
   this.$router.back()
   
   // go可前进也可后退，需要指定前进/后退的步数
   this.$router.go(n)
   

   ​

缓存路由组件

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

2. 代码：

   <!-- 指定单个路由组件不被销毁 -->
   <keep-alive include="News">
   	<router-view></router-view>
   </keep-alive>
   
   <!-- 指定多个路由组件不被销毁，include前要加冒号，让引号里的内容被解析为js表达式 -->
   <keep-alive :include="['News', 'Message]">
   	<router-view></router-view>
   </keep-alive>
   

3. 注意：

   1. 如果不写include，默认 keep-alive 包裹的所有路由组件都不被销毁
   2. include里面写的是组件名，指定哪个组件保持挂载，不被销毁

2个新的生命周期钩子

1. 作用：路由组件所独有的钩子，用于捕获路由组件的激活状态

2. 使用：

   activated() {
       // 路由组件被激活时触发
   },
       
   deactivated() {
   	// 路由组件失活时触发
   }
   

   ​

3. 复习所有的生命周期钩子：

   beforeCreate：vm被创建，生命周期、事件初始化，但数据监测、数据代理还未开始

   created：已经做完了数据监测、数据代理，可以用vm访问data、methods

   beforeMount：页面显示的是未经Vue编译的DOM结构

   mounted：Vue解析模板，生成了虚拟DOM，将内存中的虚拟DOM转为真实DOM并挂载到了页面上

   beforeUpdate：更新了数据，但Vue未将根据新数据生成的DOM挂载到页面上

   updated：Vue根据新数据生成新的虚拟DOM，与旧的DOM进行diff比较，将新的真实DOM挂载到了页面上

   beforeDestroy：vm/组件实例对象被销毁之前

   destroyed：vm/组件实例对象被销毁之后

   nextTick：下一次DOM节点更新结束后：即更新了数据，Vue修改DOM并挂载完毕后

   activated：路由组件被激活

   deactived：路由组件失活

路由守卫

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

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫

   // 全局前置路由守卫——初始化时、每次路由切换之前会被调用
   router.beforeEach((to, from, next) => {
       console.log('前置路由守卫', to, from)
   
       if (to.meta.isAuth) { // 判断是否需要验证权限，需要在每个route中配置meta对象
           if (localStorage.getItem('school') === 'fzu') {
               next()
           } else {
               alert('当前学校无权限查看！')
           }
       } else {
           next()
       }
   })
   
   
   
   // 全局后置路由守卫——初始化时、每次路由切换之后会被调用
   router.afterEach((to, from) => {
       console.log('后置路由守卫', to, from)
       document.title = to.meta.title || 'Vue学习'
   })
   
   export default router
   

4. 独享守卫

   route: [
   ...
   {
       name: 'xinwen',
       ... 
       meta: {isAuth: true, title: '新闻'},
       
       // 独享路由守卫
       beforeEnter: (to, from, next) => {
           if (to.meta.isAuth) {
               if (localStorage.getItem('school') === 'fzu') {
                   next()
               } else {
                   alert('您无权查看新闻！')
               }
           } else {
               next()
           }
       },
   }
   ]
   

   注意： 独享路由守卫只有一种 beforeEnter

   ​

5. 组件内守卫

   // 进入守卫：通过路由规则进入该组件时被调用
   beforeRouteEnter (to, from, next) {
       ...
   },
   
   // 离开守卫：通过路由规则离开该组件时被调用
   afterRouteLeave (to, from, next) {
       ...
   }
   

路由器的2种工作模式

1. 对于一个 url 来说，# 以及后面的内容都是 hash 值

2. hash值不会包含在http请求中，即：不会随着http请求发给服务器

3. hash模式：

   1. 地址中永远带着 # ，不美观
   2. 若以后将地址通过第三方手机app分享，若app校验严格，地址会被标记为不合法
   3. 兼容性较好

   ​

4. history模式：

   1. 地址干净美观
   2. 兼容性与hash模式相比略差
   3. 应用部署上线后需要后端人员解决刷新页面服务端404的问题

Vue UI 组件库

移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI https://mint-ui.github.io
4. Nut UI https://nutui.jd.com/#/

PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn (基于Vue)
2. IView UI https://www.iviewui.com