# vue2代码+资料

**Repository Path**: zhongyiwentao/vue2-code-information

## Basic Information

- **Project Name**: vue2代码+资料
- **Description**: vue2代码+资料  ；尚硅谷禹神前端 
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-22
- **Last Updated**: 2024-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记

# 模板项目的结构

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

# 关于不同版本的Vue

>1.Vue.js与Vue.runtime.xxx.js的区别：
>
>(1)Vue.js是完整版的Vue 包含：核心功能+模板解析器
>(2)Vue.runtime.xxx.js是运行时的Vue，只包含核心功能；没有模板解析器
>
>2.因为Vue.runtime.xxx.js没有模板解析器，所有不能使用template配置项。需要使用render函数接收到 createElement函数去指定具体内容
>
>```js
>new Vue({
>    el:'#app',
>    render:h => h(App)
>})
>```

# vue.config.js配置文件
> 使用vue inspect > output.js 可以查看Vue脚手架的默认配置（只是查看）
> 使用vue.config.js可以对脚手架进行个性化定制，详情见 https://cli.vuejs.org/zh/config/

# 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','age']

```js
   第二种方式（限制类型）:
     props:{
          age:Number,
          name:String
      }
   第三种方式（限制类型、限制必要性、指定默认值）
     props:{
          name:{
             type:String, //类型
             required:true, //必要性
             default: '老昂'  //默认值
       }
        }
 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
 若业务需求确实需要修改，那么请赋值props的内容到data中一份，然后去修改data中的数据
```


# minxin(混入)
> 功能：可以把多个组件共用的配置提取成一个混入对象
>  使用方式：
>       第一步定义混合  xxx.js  例如
               {  
                  data() {

>                      },
>                    methods:{....}
 >                }
>         第二步使用混合，例如：
>            （1）全局混入：Vue.mixin(xxx)
>                (2)局部混入  minxins:['xxx']

 >  注意：   混入是进行混合在一起，不进行覆盖 
           如果相同配置以vm或vc为准 
           一个特殊 mounted()  它不以谁为准  直接混入 并且在vm或vc的mounted内容上面执行


# 插件 
   功能: 用于增强Vue
   本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据（可变数组）
   定义插件：
      1.定义一个js  
      2.编写install方法                

```js
install(Vue，options) {
	//1.添加全局过滤器
		Vue.filter(....)
	//2.添加全局指定
		Vue.directive(....)
	//3.配置全局混入
		Vue.mixin(....)
	//4.添加实例方法
		Vue.prototype.xxx=function() {....}
}
```
   使用插件：Vue.use()

# scoped样式
```js
作用：让样式在局部生效，防止冲突 
    防止不同组件中style的名字定义相同发生冲突问题
写法：<style scoped>
```

# 总结TodoList案例
1.静态化编码流程： 
（1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
（2）实现动态组件：考虑好数据的存放位置，数据是在一个组件在用，还是一些组件在用
       1.一个组件在用，数据放在组件自身即可
       2.一些组件在用，放在他们共同的父组件上
（3）实现交互：从绑定事件开始

2.props适用于：
   （1）父组件 ===》 子组件通信   ：xxx
   （2）子组件 ===》 父组件通信 （要求 父组件要先传一个函数给子组件）

3.使用v-model时要切记： v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
4.props传过来的弱势对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

# WebStorage

1、存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

2、浏览器通过Window.sessionStorage和Window.laocalStorage属性来实现本地存储机子

3、相关API

```js
1.  xxxStorage.setItem('key','value');
```

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

2.  xxxStorage.getItem('key');

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

3. xxxStorage.removeItme('key');

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

4. xxxStorage.clear();

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



4、备注：

```js
1. SessionStorage存储的内容会随着浏览器窗口关闭而消失
1. sessionStorage存储的内容，需要手动清除才会消失
1. xxxStorage.getItem(xxx)如果xx对应的value获取不到，那么getItem的返回值是null
1. JSON.parse(null)的结果依然是null   
1. xxxStorage.setItem 存储的key只能是字符串， value会自动变成字符串。
```



# 组件的自定义事件

1、一种组件间通信的方式，适用于：**子组件====》父组件**

2、使用场景：A是父组件，B是子组件；B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）

3、绑定自定义事件：

​		1.第一种方式，在父组件中：

```js
<School v-on:getSchoolName1="getSchoolName" ></School>
//<School v-on:getSchoolName1.once="getSchoolName" ></School>-->
或
<School @getSchoolName1="getSchoolName" ></School>
//<School @getSchoolName1.once="getSchoolName" ></School>-->
```

​		2.第二种方式，在父组件中

```js
<School ref="school"  ></School>-->

.......

methods: {
   
    getSchoolName(val,...param) {
      //...param 第一个之后的参数都封装到一个数组中
      console.log("获取学校名称",val,param)
    }
  },

 mounted() {
    this.$refs.school.$on("getSchoolName1",this.getSchoolName)
   // this.$refs.school.$once("getSchoolName1",this.getSchoolName)
  }
```

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

4、触发自定义事件：this.$emit('getSchoolName1',数据）

5、解绑自定义事件 ：this.$off('getSchoolName1')

6、组件上也可以绑定原生的DOM事件，需要使用native修饰符。

7、注意：通过this.$refs.xxx.$on('getSchoolName1',回调)绑定自定义事件时，**回调要么配置在methods中，要么使用箭头函数**，否则this指向会出现问题！

# 全局事件总线（GlobalEventBus）

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

2.安装全局时间总线：

```js
new Vue（ {
  ....
  beforeCreate() {
    Vue.prototype.$bus = this
  }
）
```

3.使用事件总线：

​	1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，时间的回调留在A组件自身。

```js
mounted() { this.$bus.$on('xxx',this.demo)}
methods（） {
demo（） {....}
}

```

 2.提供数据  this.$bus.$emit('xxx',数据)

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

# 消息订阅与发布

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

2.使用步骤：

​	1.安装pubsub：npm i pubsub-js

​	2.引入 import pubsub from ‘pubsub-js’

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

```js
methods() {
  demo(data) {.....}
}
....
mounted() {
  this.pid  = pubsub.subscribe('xxx'.this.demo) //订阅消息
}
```

​	4.提供数据：  pubsub.publish('xxx',数据)

​	5.最好在beforeDestory钩子中，用PubSub.unsubscribe(pid)去取消订阅

# nextTick

1.语法：this.$nextTick（回调函数）

2.作用：在下一次Dom更新结束后执行其指定的回调

3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时  要在nextTick所指定的回调函数中执行



# Vue封装的过渡与动画

1.作用：在插入、更新或移除DOM元素时，在核实的时候给元素添加样式类名

2.图示:

![image-20231209161519541](img/image-20231209161519541.png)

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.使用<transituion>包裹过渡的元素，并配置name 属性

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

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

# vue脚手架配置代理

## 方法一

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

```js
 devServer: {
    proxy: 'http://localhost:4000'
  }
```

说明: 

​		1.优点：配置简单，请求资源时直接发给前端(8080)即可。

​		2.缺点：不能配置多个代理，不能灵活的控制请求是否走代理

​		3.工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

## 方法二（推荐）

```js
devServer: {
    proxy: {
      '/api': {
      //匹配所以以/api开头的请求路径
        target: 'http:localhost:5000',
        //将请求服务器的时候将api替换为空  
        pathRewrite:{'^/api':''} , 
        ws: true,  //开启webS
        //服务器获取虚拟服务器地址 是否使用服务器地址 
        //true 获取就是http:localhost:5000   ；false 就是http:localhost:8080（真实地址）
        changeOrigin: true   
      },
      '/api2': {
      //匹配所以以/api开头的请求路径
        target: 'http:localhost:5001',
        ws: true,   
        changeOrigin: true   
      },
     
    }
  }
```

说明：

​	1.优点：可以配置多个代理，且可以灵活的控制请求是否走代理

​	2.缺点：配置略微繁琐，请求资源时必须加前缀

# 插槽

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

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

3.使用方式

​	1.默认插槽

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

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

​	2.具名插槽

```js
父组件中：
<Category>
 		 <div slot='center'>html结构1 </div>
</Category>

<Category>
        <template v-slot:center>
            <div>html结构1 </div>
        </template>
 		
</Category>

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

​	3.作用域插槽

   1.理解：数据在子组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的机构由App组件决定）

  2.具体编码

```js
子组件：
<template>
   <div class="div1">
        <h3 class="h33">{{title}}分类</h3>
<!--       定义一个插槽  （默认插槽）-->
       <slot :wwz="games">我是一些默认值，当使用者没有传递具体结果时我会体现</slot>


   </div>
</template>
<script scoped >
  export default  {
    // eslint-disable-next-line vue/multi-word-component-names
    name:'Category',
    props:['title'],
    data(){
      return {
        games:['红色警戒','穿越火线','劲舞团','超级玛丽'],
      }
    },

  }
</script>


<template>
  <div class="container">

    <Category title="游戏">
      <template scope="{wwz}">
        <ul>
          <li v-for="item in wwz" :key="item">{{ item }}</li>
        </ul>
      </template>

    </Category>

    <Category title="游戏2">
      <template scope="{wwz}">
        <ol>
          <li v-for="item in wwz" :key="item">{{ item }}</li>
        </ol>
      </template>

    </Category>

    <Category title="游戏3">
      <template slot-scope="{wwz}">
        <h4 v-for="item in wwz" :key="item">{{ item }}</h4>
      </template>

    </Category>


  </div>
</template>
<script>
import Category from './components/Category'

export default {
  name: 'App',
  components: {Category},

  methods: {},
}
</script>


```

# Vuex

## 1.概念

​	在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件通信的方式，且适用于任何组件间通信

## 2.何时使用？

​	多个组件需要共享数据时

## 3.搭建vuex环境

1.下载依赖

```js
注意：vue2对应的vuex是3  vue3对应的vuex是4
默认引入的vuex 4版本，因此使用vue2的时候引入vuex要指定版本
npm i vuex@3 
```

2.创建文件：src/store/index.js

```js
//该文件用于创建Vuex中最为核心的store


//引入vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
//准备actions--用于响应组件中的动作
const actions = {

    // add(context,value) {
    //     console.log("actions中add被调用了")
    //     context.commit("ADD",value)
    // },
    // subtract(context,value) {
    //     context.commit('SUBTRACT',value)
    // },
    addSum(context,value) {
        if (context.state.sum % 2 != 0) {
            context.commit("ADD",value)
        }

    },
    addWait(context,value) {
        setTimeout(() => {
            context.commit('ADD',value)
        },500)

    }

}

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

}

//准备state --用于存储数据
const  state = {
    //求和工具
    sum:+0
}
//创建store 并暴露
export default new Vuex.Store( {
     actions,
     mutations,
     state
 })

```

3.在main.js中创建vm时初入store配置项

```js
const vm = new Vue({
    el:'#app',
    render:h => h(App),
    store,
    beforeCreate() {
        Vue.prototype.$bus = this
    }
})
```

## 4.基本使用

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

组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名'，数据) 
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，既不写dispatch，直接编写commit

## 5.getters的使用

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

2.在store.js中追加getters配置

```js
....

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

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

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

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

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

```js
computed: {
//借助mapState生成计算属性  对象写法
...mapState( {he:'sum',xuexiao:'school',xiaoxi:'message'}), 
//借助mapState生成计算属性  数组写法
...mapState( ['sum','school','message']),
}

```

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

```js
computed: {
//借助mapGetters生成计算属性  对象写法
...mapGetters( {bigSum:'bigSum'}), 
//借助mapGetters生成计算属性  数组写法
...mapGetters( ['bigSum']),
}
```

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

```js
//对象写法
 ...mapActions({addSum:'addSum',addWait:'addWait'}),
//数组写法
...mapActions(['addSum','addWait']),
```

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

```js
//对象写法
 ...mapMutations({add:'ADD',subtract:'SUBTRACT'}),
//数组写法
...mapMutations(['ADD','SUBTRACT']),
```

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

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

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

2.修改store.js

```js
//该文件用于创建Vuex中最为核心的store


//引入vuex
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)

 const categoryOption = {
     namespaced:true,
     actions: {
         addSum(context, value) {
             if (context.state.sum % 2 != 0) {
                 context.commit("ADD", value)
             }

         },
         addWait(context, value) {
             setTimeout(() => {
                 context.commit('ADD', value)
             }, 500)
         }
     },
     mutations:{
         ADD(state,value) {
             console.log("mutations中ADD被调用了")
             state.sum = state.sum + value
         },
         SUBTRACT(state,value) {
             console.log("mutations中SUBTRACT被调用了")
             state.sum = state.sum - value
         },
     },
     state:{
         //求和工具
         sum:+0,
         school:'希望小学',
         message:'希望工程',
     },
     getters:{
         bigSum(state) {
             return state.sum * 10;
         }
     }

 }

 const persionOption = {
     namespaced:true,
     actions:{
        addItemWang(context,value) {
            if (value.name.indexOf('王') == 0) {
                context.commit('ADDITEM',value)
            }else{
                alert("只能添加姓王的人")
            }
        }
     },
     mutations:{
         ADDITEM(state,value) {
             state.persionList.unshift(value)
         }
     },
     state:{
         persionList:[{id:'1',name:'李四'}]
     },
     getters:{
        addPersionFirst(state) {
            return state.persionList[0].name
        }
     }

 }


//创建store
export default new Vuex.Store( {
    modules: {
        a:categoryOption,
        b:persionOption
    }
 })

```

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

```js
//方式1 自己直接读取
this.$store.state.a.list
//方式2 借助mapSatate读取
...mapState('a',['list'])
```

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

```js
//方式1 自己直接读取
this.$store.getters['a/list']
//方式2 借助mapGetters
...mapGetters('a',['list'])
```

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

```js
//方式1 自己直接读取
this.$store.dispatch['a/list',persion]
//方式2 借助mapGetters
...mapAction('a',['list'])
```

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

```js
//方式1 自己直接读取
this.$store.commit['a/LIST',persion]
//方式2 mapMutations
...mapMutations('a',['LIST'])
```

# 路由

1.理解：一个路由（route）就是一组映射关系（key-value），多个路由可能需要路由器router进行管理

2.前端路由：key：路径 ，value：组件

## 1.基本使用

1.安装vue-router，命令 npm i vue-router@3   (vue2需要指定3版本  vue3无需指定)

2.应用插件：Vue.use(VueRouter)

3.编写router配置项：

```js
import VueRouter from "vue-router";
//引入组件
import Persion from "@/components/Persion";
import About from "@/components/About";

//创建并暴露router实例对象吗，去管理一组一组的路由规则
export  default  new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/persion',
            component:Persion
        }
    ]
})
```

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

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

5.指定展示位置

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

## 2.几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2.通过切换，隐藏了的路由组件，默认是被销毁掉，需要的时候再去挂载

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

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

## 3.多级路由

```js
 routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/persion',
            component:Persion,
            //二级路由
            children:[
                {
                    path:'message',
                    component:Message,
                    //三级路由
                    children:[
                        {
                            path:'detail',
                            component:Detail
                        },
                    ]
                },
                {
                    path:'new',
                    component:New
                },
            ]
        }
    ]
```

注意：1级路由要写/  2级以及其他不要写/

## 4.路由的query参数

1.传递参数

```js
  <div>
    <ul>
      <li v-for="item in messageList" :key="item.id">
<!--        第一种写法 to的字符串写法-->
<!--        <router-link :to="`/persion/message/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>&nbsp;&nbsp;-->
<!--        第二种写法 to的对象写法-->
        <router-link :to="{
            path:'/persion/message/detail',
            query:{
              id:item.id,
              name:item.name,
            }
        }">
          {{item.name}}
        </router-link>&nbsp;&nbsp;
        
      </li>
    <router-view></router-view>
    </ul>
  </div>
```

2.接收参数：

```js
this.$route.query.id
this.$route.query.name
```

## 5.命名路由

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

2.如何使用

​	1.给路由命名

```js
 routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            name:'renmen',
            path:'/persion',
            component:Persion,
            //二级路由
            children:[
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    //三级路由
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail
                        },
                    ]
                },
                {
                    name:'xin',
                    path:'new',
                    component:New
                },
            ]
        }
    ]
```

​	2.简化跳转：

```js
简化前  需要写完整的路径
<!--  <router-link class="list-group-item" active-class="active" to="/persion/new">News</router-link>-->
          <!--        使用name 必须是对象形式！！！！-->、
简化后直接通过名字跳转
          <router-link class="list-group-item" active-class="active" :to="{name:'xin'}">News</router-link>
          
 
      <li v-for="item in messageList" :key="item.id">
<!--        第一种写法 to的字符串写法-->
<!--        <router-link :to="`/persion/message/detail?id=${item.id}&name=${item.name}`">{{item.name}}</router-link>&nbsp;&nbsp;-->
<!--        第二种写法 to的对象写法-->
<!--        <router-link :to="{-->
<!--            path:'/persion/message/detail',-->
<!--            query:{-->
<!--              id:item.id,-->
<!--              name:item.name,-->
<!--            }-->
<!--        }">-->
        <!--        使用name 必须是对象形式！！！！-->
<!--        简化后写法-->
        <router-link :to="{
            name:'xiangqing',
            query:{
              id:item.id,
              name:item.name,
            }
        }">

        {{item.name}}
        </router-link>&nbsp;&nbsp;

      </li>
```

## 6.路由的params参数

1.配置路由，声明接受params参数

```js
  routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About
        },
        {
            name:'renmen',
            path:'/persion',
            component:Persion,
            //二级路由
            children:[
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    //三级路由
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail/:id/:name',
                            component:Detail
                        },
                    ]
                },
                {
                    name:'xin',
                    path:'new',
                    component:New
                },
            ]
        }
    ]
```

2.传递参数

```js
<li v-for="item in messageList" :key="item.id">
<!--        第一种写法 to的字符串写法  params方法  将路由中path修改-->
<!--        <router-link :to="`/persion/message/detail/${item.id}/${item.name}`">{{item.name}}</router-link>&nbsp;&nbsp;-->
<!--        第二种写法 to的对象写法-->

<!--        简化后写法-->
<!--        注意如何使用params 不使用query，必须使用name  不能使用path否则会出现错误-->
        <router-link :to="{
            name:'xiangqing',
            params:{
              id:item.id,
              name:item.name,
            }
        }">

        {{item.name}}
        </router-link>&nbsp;&nbsp;

      </li>
```

3.接收参数

```js
 this.$route.params.id;
 this.$route.params.name;
```

## 7.路由的props配置

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

```js
 {
                            name:'xiangqing',
                            path:'detail/:id/:name',
                            // props第一种写法   props值为对象，该对象中所由于的key-value的组合最终会通过props传给Detail组件
                             props:{id:'1',name:'zs'},
                            // props第二种写法   props值为布尔值，会把路由中收到的所有的params参数通过props传给Detail组件，query不可以有局限性
                             props:true,
                            // props第三种写法   props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail
                             props($route) {
                                 return {
                                     id:$route.query.id,
                                     name:$route.query.name,
                                 }
                             },
                            //简化 1
                             props({query}) {
                                 return {
                                     id:query.id,
                                     name:query.name,
                                 }
                             },
                            //简化 2
                            props({query:{id,name}}) {
                                return {
                                    id,
                                    name
                                }
                            },
                            component:Detail
                        },
                    ]
                },
```

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

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

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

3.如何开启replace模式：<router-link repace ...> News </router-link>

## 9.编程式路由导航

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

2.具体编码：

```js
this.$router.push({
   name:'xaingqing',
   params:{
      id:xxx,
      name:xxx
   }
})


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

this.$router.forward() 前进
this.$router.back() 后退
this.$router.go() //正数 前进几步 this.$router.go(2)   负数 后退几步 this.$router.go(-3)


```

## 10.缓存路由组件

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

2.具体编码：

```js
<!--      这里的New是组件的name  如果不写这个属性是都进行缓存 不销毁-->
      <keep-alive include="New">
        <router-view></router-view>
      </keep-alive>
```

```js
<!--     缓存多个 使用功能数组-->
      <keep-alive :include="['New','Message']">
        <router-view></router-view>
      </keep-alive>
```

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

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

2.具体名字：

​	1.activated路由组件被激活时触发。

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

## 12.路由守卫

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

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

3.全局守卫：

```js
//全局前置路由守卫  ---初始化的时候被调用，每次路由切换之前被调用
router.beforeEach((to,from,next) => {
    console.log('前置路由',to,from);
    //isAuth 如果为true 规定需要校验
    if (to.meta.isAuth) {
        if(localStorage.getItem("school") === 'atguigu') {
            //放行
            next();
        }else {
            alert("学校名不对，无权限查看！")
        }
    }else {
        next()
    }
})
//全局后置路由守卫--初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from) => {
    console.log('后置路由',to,from)
    document.title = to.meta.title
})
```

4.独享守卫：

```js
  {
                    name:'xin',
                    path:'new',
                    //给用户存放一些自定义的东西
                    meta:{
                        isAuth:true,
                        title: "新"
                    },
                    component:New,
                    //独享路由
                    beforeEnter(to,from,next)  {
                        console.log('独享路由',to,from);
                        //isAuth 如果为true 规定需要校验
                        if (to.meta.isAuth) {
                            if(localStorage.getItem("school") === 'atguigu') {
                                //放行
                                next();
                            }else {
                                alert("学校名不对，无权限查看！")
                            }
                        }else {
                            next()
                        }
                    }
                },
```

5.组件内守卫

```
//进入守卫：通过路由规则，进入该组件时被调用
 beforeRouteEnter(to,from,next)
 //离开守卫:通过路由规则，离开该组件时被调用
  beforeRouteLeave(to,from,next)
```

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

1.对于url来说,什么是hash值?-  ---- #及其后面的内容就是hash值

![image-20240118224854511](C:\Users\admin\AppData\Roaming\Typora\typora-user-images\image-20240118224854511.png)

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

3.hash模式：

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

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

​	3.兼容性较好

4.history模式：

​	1.地址干净，美观

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

​	3.应用部署上线时需要后端人员支持，解决刷新页面服务器404的问题