# VueBasic2

**Repository Path**: pyds/vue-basic2

## Basic Information

- **Project Name**: VueBasic2
- **Description**: Vue基础练习笔记2
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-02-19
- **Last Updated**: 2022-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

## 脚手架文件结构：
```
  ├─ node_modules
  ├─ public
  │  ├─ favicon.ico: 页签图标
  │  └─ index.html:  主页面
  ├─ src
  │  ├─ assets: 存放静态资源
  │  │  └─ logo.png
  │  ├─ components: 存放组件
  │  │  └─ HelloWorld.vue
  │  ├─ App.vue: 汇总所有组件
  │  └─ main.js: 入口文件
  ├─ .gitignore: git版本管制忽略的配置
  ├─ babel.config.js: babel的配置文件
  ├─ package-lock.json: 包版本控制文件
  ├─ package.json: 应用包配置文件
  └─ README.md: 应用描述文件
```

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

## vue.config.js配置文件
>使用 `vue inspect > output.js` 可以查看到Vue脚手架的默认配置
>使用 `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" :age="18"/>`

  2. 接收数据：
      >第一种方式（只接收）： `props: ["names", "age"]`
      >第二种方式（限制类型）： 
      >```
      >props: {names: String, age: Number}
      >```
      >第三种方式（限制类型、限制必要性、指定默认值）： 
      >```
      >props: {
      >  name: {
      >    type: String,  // 类型
      >    required: true // 必要性
      >  },
      >  age: {
      >    type: Number,
      >    default: 99    // 默认值
      >  }
      >}
      >```
      备注：props是只读的，Vue底层会检测你对props的修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

## mixin(混入)
  功能: 可以把多个组件共用的配置提取成一个混入对象
  ```  
  使用方式：
    第一步: 定义混合，例如：
      {
        data(){...},
        methods: {...},
        ...
      }
    第二步: 使用混合，例如:
      (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.$myMethod = function(){...}
      Vue.prototype.$myProperty = xxx
    }

  使用插件：
    Vue.use()
  ```

## scoped样式
  作用：让样式在局部生效，防止冲突
  写法：`<style scoped>`

## 总结TodoList案例
1. 组件化编码流程：
    ```
    (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。
    (2).实现动态组件：考虑好数据存放位置，数据是一个组件在用还是多个组件在用：
        a.一个组件在用：放在组件自身即可
        b.多个组件在用：放在它们共同父组件上（状态提升）
    (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. 一种组件间的通讯方式。适用于：<font color=#FF0000 >子组件 ===> 父组件</font>
  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<font color=#FF0000 >事件回调在A中</font>）。
  3. 绑定自定义事件：
      a.第一种方式，在父组件中：`<Demo @event="test"/>` 或 `<Demo v-on:event="test"/>`
      b.第二种方式，在父组件中：
      ```
      <Demo ref="xxx"/>
      ......
      mounted(){
        this.$refs.xxx.$on("event", this.test)
      }
      ```
      c.若想让自定义事件只能触发一次,可以使用`once`修饰符或`$once`方法.
  
  4. 触发自定义事件：`this.$emit("event", 数据)`
  5. 解绑自定义事件：`this.$off("event")`
  6. 组件上也可以绑定原生DOM事件，需要使用`native`修饰符.
  7. 注意：通过 `this.$refs.xxx.$on("event", 回调函数)` 绑定自定义事件时，回调函数<font color=#FF0000 >要么配置在methods中，要么用剪头函数</font>，否则this指向会出问题！

## 全局事件总线
1. 一种组件间通信方式，适用于<font color="red">任意组件间通信</font>。
2. 安装全局事件总线：
    ```
    new Vue({
      ......
      beforeCreate() {
        Vue.prototype.$bus = this  // 安装全局事件总线，$bus就是当前应用的vm
      },
      ......
    })
    ```
3. 使用事件总线：
    - 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<font color="red">回调留在A组件自身</font>。
      ```
      methods() {
        demo(data) {
          ......
        }
      }
      ......
      mounted() {
        this.$bus.$on("xxx", this.demo)
        // this.$bus.$on("xxx", ()=>{......})
      }
      ......
      beforeDestroy() {
        this.$bus.$off("xxx")
      }
      ```
    - 提供数据：`this.$bus.$emit("xxx", 数据)`
  4. 最好在beforeDestroy钩子中，用$off去解绑<font color="red">当前组件所用到的</font>事件

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

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

## Vue封装的过度与动画
1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2. 图示：
<!-- ![doge](data:image/png;base64,iVBORw0KGgoAAAA...) -->
<img src="./static/img/过度与动画.png" alt="过度与动画图片路径加载失败！" />

3. 写法：
    - 准备好样式：
      - 元素进入的样式：
        > `v-enter`: 进入的起点
        > `v-enter-active`: 进入过程中
        > `v-enter-to`: 进入的终点
      - 元素离开的样式：
        > `v-leave`: 离开的起点
        > `v-leave-active`: 离开过程中
        > `v-leave-to`: 离开的终点

    - 使用 `<transition>` 包裹要过度的元素，并配置name属性：
      ```html
      <transition name="hello">
          <h1 v-show="isShow">你好！</h1>
      </transition>
      ```

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

## Vue脚手架配置代理
#### 方法一：
在 `vue.config.js` 中添加如下配置：
```js
devServer:{
  proxy: "http://localhost:5000"
}
```
说明：
1. 优点: 配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点: 不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式: 若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

#### 方法二：
编写 `vue.config.js` 配置具体代理规则：
```js
module.exports = {
  devServer: {
    proxy: {
      "/api1": { // 匹配所有以 '/api1' 开头的请求路径 
        target: "http://localhost:5000", // 代理目标的基础路径
        pathRewrite: {"^/api1": ""}
        changeOrigin: true,
      },
      "/api2": { // 匹配所有以 '/api2' 开头的请求路径 
        target: "http://localhost:5005", // 代理目标的基础路径
        pathRewrite: {"^/api2": ""}
        changeOrigin: true,
      },
    }
  }
}

/*
  changeOrigin 设置为true时，服务器收到的请求头中的host为：localhost:5000
  changeOrigin 设置为false时，服务器收到的请求头中的host为：localhost:8080
  changeOrigin 默认值为true
*/
```
说明：
1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。

## 插槽
1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信段方式，适用于 <font color=#FF0000 >父组件 ===> 子组件</font>。
2. 分类：默认插槽、具名插槽、作用域插槽。
3. 使用方式：
    - 默认插槽：
      ```html
      父组件中：
          <Category>
            <div>html结构1</div>
          </Category>

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

          <style>
            ...
          </style>
      ```

    - 具名插槽：
      ```html
      父组件中：
          <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
              <div>html结构2</div>
            </template>
          </Category>

      子组件中：
          <template>
            <div>
              <!-- 定义插槽 -->
              <slot name="center">插槽默认内容...</slot>
              <slot name="footer">插槽默认内容...</slot>
            </div>
          </template>
          
          <script>
            ...
          </script>

          <style>
            ...
          </style>
      ```

    - 作用域插槽：
      - 理解：数据在组件自身，但根据数据生成的结构需要组件使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）
      - 具体编码：
        ```html
        父组件中：
            <Category>
              <template scope="scopeData">
                <!-- 生成ul列表 -->
                <ul>
                  <li v-for="g in scopeData.games" :key="g">{{ g }}</li>
                </ul>
                <h4>{{ scopeData.msg }}</h4>
              </template>

              <template scope="{games}">
                <!-- 生成ol列表 -->
                <ol>
                  <li v-for="g in games" :key="g">{{ g }}</li>
                </ol>
              </template>

              <template slot-scope="scopeData">
                <!-- 生成h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{ g }}</h4>
              </template>
            </Category>

        子组件中：
            <template>
              <div>
                <!-- 定义插槽 -->
                <slot :games="games" msg="hello">插槽默认内容...</slot>
              </div>
            </template>
            
            <script>
              export default {
                name: "Category",
                props: ["title"],
                // 数据在子组件自身
                data() {
                  return {
                    games: ["超级玛丽", "王者荣耀", "QQ飞车", "海岛奇兵"]
                  }
                }
              }
            </script>

            <style>
              ...
            </style>
        ```

## Vuex

#### 1.概念
&emsp;&emsp;在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信方式，且适用于任意组件间通信。

#### 2.何时使用
&emsp;&emsp;多个组件需要共享数据时。

#### 3.搭建Vuex环境
- 创建 `src/store/index.js` 文件:
  ```js
  // 该文件用于创建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 = {}

  // 创建并暴露store
  export default new Vuex.Store({
      actions,
      mutations,
      state
  })
  ```
- 在 `src/main.js` 中创建vm时传入 `store` 配置项
  ```js
  ......
  // 引入store
  import store from "./store"
  ......

  // 创建vm
  new Vue({
      el: "#app",
      render: h => h(App),
      store,
      ......
  })
  ```

#### 4.基本使用
- 初始化数据`state`、配置`actions`、`mutations`，操作文件 `store.js`:
  ```js
  // 该文件用于创建Vuex中最为核心的store
  // 引入Vue
  import Vue from "vue"
  // 引入Vuex
  import Vuex from "vuex"
  // 应用Vuex插件
  Vue.use(Vuex)

  // 准备actions——用于响应组件中的动作
  const actions = {
      // 响应组件中的加的动作
      jia(context, value) {
          // console.log("actions中的jia被调用了", context, 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
  })

  ```
- 组件中读取vuex中的数据：`$store.state.sum`
- 组件中修改vuex中的数据：`$store.dispatch('actions中的方法名', 数据)` 或 `$store.commit('mutations中的方法名', 数据)`
- 备注: 若没有网络请求或其它业务逻辑，组件中也可以越过actions，即不写`dispatch`，直接写`commit`

#### 5.getters的使用
  - 概念: 当state中的数据需要经过加工后再使用，可以使用getters加工。
  - 在`store.js`中追加`getters`配置
    ```js
    ......
    
    const getters = {
      bigSum(state) {
        return state.sum * 10
      }
    }

    // 创建并暴露store
    export default new Vuex.Store({
      ......
      getters
    })
    ```
  - 组件中读取数据：`$store.getters.bigSum`

#### 6.四个map方法的使用
  - **mapState方法：** 用于帮助我们映射`state`中的数据为计算属性
    ```js
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 (对象写法)
      ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),
      
      // 借助mapState生成计算属性，从state中读取数据 (数组写法)
      ...mapState(['sum', 'school', 'subject']),
    }
    ```

  - **mapGetters方法：** 用于帮助我们映射`getters`中的数据为计算属性
    ```js
    computed: {
      // 借助mapGetters生成计算属性，从getters中读取数据 (对象写法)
      ...mapGetters({bigSum: 'bigSum'}),
      
      // 借助mapGetters生成计算属性，从getters中读取数据 (数组写法)
      ...mapGetters(['bigSum']),
    }
    ```
  - **mapActions方法：** 用于帮助我们生成与actions对话的方法，即：包含 `$store.dispatch(xxx)` 的函数
    ```js
    methods: {
      // 借助mapActions生成，incrementOdd、incrementWait (对象形式)
      ...mapActions({incrementOdd: "jiaOdd", incrementWait: "jiaWait"})

      // 借助mapActions生成，incrementOdd、incrementWait (数组形式)
      ...mapActions(["jiaOdd", "jiaWait"])
    }
    ```

  - **mapMutations方法：** 用于帮助我们生成与mutations对话的方法，即：包含 $store.commit(xxx) 的函数
    ```js
    methods: {
      // 借助mapMutations生成，increment、decrement (对象形式)
      ...mapActions({increment: "JIA", decrement: "JIAN"})

      // 借助mapMutations生成，"JIA"、"JIAN" (数组形式)
      ...mapActions(["JIA", "JIAN"])
    }
    ```

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

#### 7.模块化+命名空间
  - 目的：让代码更好维护，让多种数据分类更加明确
  - 修改`store/index.js`
    ```js
    ......
    const countAbout = {
      namespaced: true, // 开启命名空间
      actions: { ... },
      mutations: { ... },
      state: { x: 1 },
      getters: {
        bigSum(state) {
          return state.sum * 10
        }
      }
    }

    const personAbout = {
      namespaced: true, // 开启命名空间
      actions: { ... },
      mutations: { ... },
      state: { ... }
    }

    const store = new Vuex.Store({
      modules: {
        countAbout,
        personAbout
      }
    })
    ```
  
  - 开启命名空间后，组件中读取state数据：
    ```js
    // 方式一：自己直接读取
    this.$store.state.countAbout.sum
    // 方式二：借助mapState读取
    ...mapState('countAbout', ['sum', 'school', 'subject'])
    ```

  - 开启命名空间后，组件中读取getters数据：
    ```js
    // 方式一：自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    // 方式二：借助mapGetters读取
    ...mapGetters('countAbout', ['bigSum'])
    ```

  - 开启命名空间后，组件调用dispatch：
    ```js
    // 方式一：自己直接dispatch
    this.$store.dispatch('personAbout/addPersonLi', person)
    // 方式二：借助mapActions读取
    ...mapActions('countAbout', {increment: 'jiaOdd', incrementWait: 'jiaWait'})
    ```

  - 开启命名空间后，组件调用commit：
    ```js
    // 方式一：自己直接commit
    this.$store.commit('personAbout/ADD_PERSON', person)
    // 方式二：借助mapMutations读取
    ...mapMutations('countAbout', {increment: 'JIA', decrement: 'JIAN'})
    ```

## 路由
  - 理解：一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。
  - 前端路由：key是路径，value是组件。

#### 1.基本使用
  - 安装vue-router，命令：`npm i vue-router`
  - 应用插件：`Vue.use(VueRouter)`
  - `src/router/index.js`编写router配置项
    ```js
    // 引入VueRouter
    import VueRouter from 'vue-router'
    // 引入路由组件
    import About from '../components/About'
    import Home from '../components/Home'

    // 创建router实例对象，去管理一组一组的路由规则
    const router = new VueRouter({
      routes: [
        {
          path: '/about',
          component: About
        },
        {
          path: '/home',
          component: Home
        },
      ]
    })

    // 暴露router
    export default router
    ```

  - 实现切换(active-class可配置高亮样式)
    ```html
    <router-link active-class="active" to="/about">About</router-link>
    ```

  - 指定展示位置
    ```html
    <router-view></router-view>
    ```

#### 2.几个注意点
  - 路由组件通常存放在`pages`文件夹，一般组件通常存放在`components`文件夹。
  - 通过切换，‘隐藏’了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
  - 每个组件都有自己的`$route`属性，里面存储着自己的路由信息。
  - 整个应用只有一个router，可以通过组件的`$router`属性获取到。

#### 3.多级(嵌套)路由
  - 配置路由规则，使用children配置项:
    ```js
    routes: [
      {
        path: '/about',
        component: About,
      },
      {
        path: '/home',
        component: Home,
        children: [  // 通过children配置子路由
          {
            path: 'news',  // 此处一定不要写: /news
            component: News
          },
          {
            path: 'message',  // 此处一定不要写: /message
            component: Message
          },
        ]
      }
    ]
    ```
  
  - 跳转(要写完整路径)：
    ```html
    <router-link to="/home/news">News</router-link>
    ```

#### 4.路由的query参数
  - 传递参数
    ```html
    <!-- 跳转路由并携带query参数，to的字符串写法 -->
    <!-- <router-link to="/home/message/detail?id=666&title=你好">跳转</router-link> -->
    <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>
    
    <!-- 跳转路由并携带query参数，to的对象写法 -->
    <router-link :to="{
        path: '/home/message/detail',
        query: {
            id: m.id,
            title: m.title
        }
    }">
        {{ m.title }}
    </router-link>
    ```

  - 接收参数
    ```
    $route.query.id
    $route.query.title
    ```

#### 5.命名路由
  - 作用：可简化路由跳转
  - 如何使用：
    - 给路由命名
      ```js
      {
        path: '/demo',
        component: Demo,
        children: [
          {
            path: '/test',
            component: Test,
            children: [
              {
                name: 'hello',  // 给路由命名
                path: '/welcome',
                component: Hello,
              }
            ]
          }
        ]
      }
      ```
    
    - 简化跳转
      ```html
      <!-- 简化前，需要写完整路径 -->
      <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>
      ```

#### 6.路由的params参数
  - 配置路由，声明接收params参数
    ```js
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component: News
        },
        {
          path: 'message',
          component: Message,
          children: [
            {
              name: 'xiangqing',
              path: '/detail/:id/:title',  // 使用占位符声明接收的params参数
              component: Detail
            }
          ]
        },
      ]
    }
    ```

  - 传递参数
    ```html
    <!-- 跳转并携带params参数，to的字符串写法 -->
    <router-link :to="/home/message/detail/666/你好">跳转</router-link>

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

  - 接收参数
    ```js
    $route.params.id
    $route.params.title
    ```

#### 7.路由的props配置
  - 作用：让路由组件更方便的收到参数
    ```js
    {
      name: 'xiangqing',
      path: 'detail/:id/:title',
      component: Detail,

      // 第一种写法，props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件。
      // props: {a: 666, b: '你好'}
      
      // 第二种写法，props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件。
      // props: true,
      
      // 第三种写法，props值为函数，该函数返回的对象中每组key-value都会通过props传给Detail组件
      props(route) {
        return {
          id: route.query.id,
          title: route.query.title,
        }
      }

    }
    ```

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

#### 9.编程式路由导航
  - 作用：不借助 `<router-link>` 实现路由跳转，让路由跳转更加灵活。
  - 具体编码：
    ```js
    // $router的两个API(push和replace)
    this.$router.push({
      name: 'xiangqing',
      params: {
        id: xxx,
        title: xxx
      }
    })

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

    // 前进
    this.$router.forward()
    // 后退
    this.$router.back()
    // 可前进可后退(正数向前，负数后退)
    this.$router.go(-2)
    ``` 

#### 10.缓存路由组件
  - 作用：让不展示的路由组件保持挂载，不被销毁
  - 具体编码：
    ```html
    <!-- include中若包含多个组件使用逗号隔开或者写成数组 -->
    
    <!-- 包含单个缓存组件 -->
    <keep-alive include="News">
      <router-view></router-view>
    </keep-alive>

    <!-- 包含多个缓存组件 -->
    <keep-alive include="News,Message">
      <router-view></router-view>
    </keep-alive>
    <keep-alive :include="['News', 'Message']">
      <router-view></router-view>
    </keep-alive>
    ```

#### 11.两个新的生命周期钩子
  - 作用：路由组建所独有的两个钩子，用于捕获路由组件的激活状态。
  - 具体名字：
    - `activated` 路由组件被激活时触发。
    - `deactivated` 路由组件失活时触发。

#### 12.路由守卫
  - 作用：对路由进行权限控制
  - 分类：全局守卫、独享守卫、组件内守卫
  - 全局守卫
    ```js
    // 全局前置路由守卫，初始化时执行、每次路由切换前执行
    router.beforeEach((to, from, next) => {
      console.log("beforeEach", to, from)
      if (to.meta.isAuth) {  // 判断当前路由是否需要进行权限控制
        if (localStorage.getItem("test-token") === "abc123") {  // 权限控制的具体规则
          next()  // 放行
        }
        else {
          alert("权限不足，无法查看!")
        }
      }
      else {
        next()  // 放行
      }
    })
    // 全局后置路由守卫，初始化时执行、每次路由切换后执行
    router.afterEach((to, from) => {
      console.log("afterEach", to, from)
      if (to.meta.title) {
        document.title = to.meta.title  // 修改网页title
      }
      else {
        document.title = "test"
      }
    })
    ```
  
  - 独享路由守卫
    ```js
    ......
      {
        name: "xinwen",
        path: "news",
        component: News,
        meta: {
            title: "新闻",
            isAuth: true
        },
        beforeEnter: (to, from, next) => {
            if (to.meta.isAuth) {  // 判断当前路由是否需要进行权限控制
                if (localStorage.getItem("test-token") === "abc123") {
                    // document.title = to.meta.title
                    next()
                }
                else {
                    alert("test-token错误, 无权限查看!")
                }
            }
            else {
                // document.title = to.meta.title
                next()
            }
        }
      }
    ......
    ```
  - 组件路由守卫
    ```js
    // 进入守卫，通过路由规则，进入该组件时被调用
    beforeRouteEnter(to, from, next) { ... },
    // 离开守卫，通过路由规则，离开该组件时被调用
    beforeRouteEnter(to, from, next) { ... },
    ```

#### 13.路由器的两种工作模式
  - 对于一个URL来说，什么是hash值？—— URL中#及其后的内容就是hash值（eg: http://localhost:8080/#/about, hash值为`#/about`）。
  - hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
  - hash模式：
    - 地址中永远带着#号，不美观
    - 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
    - 兼容性较好。
  - history模式：
    - 地址干净、美观。
    - 兼容性相对于hash模式较差。
    - 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题