vue框架

vue-router：

一：vue3项目中如何配置路由

1.下载vue-router,在路由文件中引入相关依赖

2.创建路由信息对象数组

3.创建路由管理器对象并对外抛出

4.在main.js使用use(router)方法，将路由管理器对象与当前vue项目相关联

5.在项目中设置路由导航router-link与路由出口router-view

6.常见面试题：route、routes、router的区别

（1）route:一组路由信息对象  {path:'/foo',component:Foo}

（2）routes：路由信息对象数组  

const routes =[
{path:'/foo',component:Foo},
{path:'/bar',component:Bar},
{path:'/user',component:User}
]

（3）router:路由管理对象   const router=createRouter({   })

二：动态路由

1.定义：我们经常需要把某种模式匹配到的所有路由，全部映射到同个组件。

      例如：我们有一个User组件，对于所有ID各不相同的用户，都要使用这个组件渲染

（1）一个【路径参数】 使用冒号：标记；

//动态路由的设置
{path:'/user/:id/:name/:age',component:user}

<router-link to="/user/1/tom/18">user-1</router-link>

<router-link to="/user/2/bob/20">user-2</router-link>

（2）可以在一个路由中设置多段【路径参数】

2.动态路由的传参

（1）动态路由的传参

1.params传参

定义动态路由：{path: '/user/:id/:name/:age',component:User}

传输参数：<router-link to="/user/1/tom/18>user-1</router-link>

接收参数：

<p>用户id--{{$route.params.id}}</p>
<p>用户名称--{{$route.params.name}}</p>

<p>用户年龄--{{$route.params.age}}</p>

2.props传参

值为布尔值的形式：

     定义动态路由：{path:'/user/:id/:name/:age',component:User,props:true}

     传输参数：

     <router-link to="/user/1/tom/18">user-1 &nbsp; &nbsp;</router-link>
     <router-link to="/user/2/jack/28">user-2 &nbsp; &nbsp;</router-link>
     <router-link to="/user/3/mary/18">user-3 &nbsp; &nbsp;</router-link>

     接收参数：props:['id','name','age']

值为函数的形式:

      定义动态路由：

     {path:'/user',name:'user',component:User,props:function(route)                   {return{id:route.params.id,name:route.params.name,age:route.params.age}}}

     传输参数：

      <router-link v-bind:to="{name:'user',params:{id:4,name:'test',age:25}}">user-4 &nbsp;        &nbsp;</router-link>

      传输参数：props:['id','name','age']

3.动态路由发生切换时的特点：

（1）特点：动态路由当路由发生切换时，并不会重新渲染路由组件，而会使用已经渲染过得路由组件（只是会修改路由参数值）,这样增加了程序的高效及时性；另一方面，组件的生命周期钩子回调函数将不会再次调用。

（2）如何解决：

   //路由导航守卫钩子函数

//beforeRouteUpdate 当前路由发生改变，但该组件并没有重新创建而是被复用时
//举例： /user/1/tom/18 改变为 /user/2/bob/20
beforeRouteUpdate(to,from,next){
console.log(to.params.name)//to:跳转之后的路由信息对象
console.log(from.params.name)//from:跳转之前的路由信息对象
next()//必须调用，代码向后执行
}

三：状态管理库vuex

1.Vuex是一个专为Vue.js应用程序开发的状态管理库。状态就是指组件之间共享的数据

2.vue项目中配置状态管理库vuex的流程

（1）下载并引入vuex的相关内容

（2）创建状态管理库对象store

（3）对外抛出store对象

（4）在main.js中奖store对象与当前项目相关联

3.store状态管理库对象重要组成部分

（1）state：组件之间共享的数据集合

组件中获取方法

               1.直接获取          this.$store.state.xxx;

               2.使用对象展开运算符mapState的形式获取...mapState(['xxx','xxx'])

（2）getters:相当于store对象计算属性,主要用于对state的数据进行过滤）

组件中获取方法

              1.直接获取this.$store.getters.xxx;

              2.使用对象展开运算符mapGetters的形式获取...mapGetter(['xxx','xxx'])

（3）mutations:定义了修改store对象中state数据的同步方法（要修改的数据不是ajax异步获取的,

组件中如何触发

               1.直接使用commit触发this.$store.commit('xxxx','传递的参数');

               2.使用对象展开运算符mapMutations的形式获取...mapMutations(['xxx','xxx'])

（4）actions:定义了修改state数据的异步方法（修改数据是ajax获取的异步数据）

组件中如何触发

                 1.直接使用dispath触发this.$store.dispath('xxxx','传递的参数');

                  2.使用对象展开运算符mapActions的形式获取...mapActions(['xxx','xxx'])

四：Vue3合成API----setup()

1.Vue3最重要的新特性之一

（1）作用：之前vue对象规定了我们必须把某一类数据放到某一个结构中，这样在一定程度上对我们的代码进行了强制的分割。                                            在vue3中我们引入了setup（）合成API语法，他可以将某数据关联的内容都整合到一个部分，即使setup（）中的内容越来越多，也会围绕着大而不乱的形式开发项目

2.setup（）特点

（1）1.setup()结构中定义的变量，函数都需要return之后才可以在模板中使用

（2）2.setup（）是处于created生命周期之前的函数，也就是说data，methods中的数据是无法访问到的，setup（）结构中的this指向undefined

（3）ref：在setup中只能包装字符串或数字形式的数据（值），使其变成响应式数据

（4）reactive  在setup中包装对象，数组形式的数据（对象/数组），使其变成响应式数据

（5）toRefs 可以直接在html模板中使用对象的属性名当变量，不需要用.访问

3.setup（）结构中如何使用生命周期函数

4.vue对象的生命周期函数（vue2.0）:vue对象从创建到销毁的一系列过程

（1）vue对象创建成功之前与创建成功之后  beforeCreate    created

（2）vue对象（model）与页面dom元素（view）绑定成功之前与绑定成功之后  beforeMount    mounted

（3）view或model数据更新之前与数据更新之后    beforeUpdate     update

（4）vue对象销毁之前与销毁之后    beforeDestroy      destroyed