vue框架（基础，路由的配置，动态路由）

vue基础

（1）数据的页面展示{{}} ,v-once:当数据改变时，插值处的内容不会更新,v-html

（2）数据绑定属性v-bind,简写用:

（3）事件调用：v-on,简写：@ 它用于监听 DOM 事件

（4）v-if 和v-show的区别

（5）v-model 数据之间的双向绑定

   v-if初始值为false，就不会编译了

   v-show都会编译，初始值为false，只是将display设为none，但它也编译了

-------------------------------

vue创建项目的两种方式

1.vue-vite创建项目

npm init vite-app router001    其中router001为项目名称

cd router001   cd到当前项目中

npm i

2.vue-cli创建项目

vue create router001  其中router001为项目名称

-------------------------------

3.vue-router

vue3中如何配置路由?

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

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

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

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

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

route、routes、router的区别?

route：一组路由信息对象 {path:'/bar',component:Bar},

routes：路由信息对象数组 const routes=[
{path:'/bar',component:Bar},
{path:'/foo',component:Foo}]

router：路由管理对象  const router=createRouter({})

----------------------------------------------------------------------

动态路由的传参：

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

1.params  

传输参数 <router-link to="/user/1/bob/20">user-21&nbsp;&nbsp;&nbsp;&nbsp;</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/2/bob/20">user-2 &nbsp;&nbsp;&nbsp;&nbsp;</router-link>
<router-link to="/user/3/mary/21">user-3 &nbsp;&nbsp;&nbsp;&nbsp;</router-link>

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

值为函数的形式

定义动态路由 {
path: '/user',
name:'user',
component: User,
props:function (route) {
return{//route指的是当前路由信息对象
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']

-------------------------------

动态路由切换时的特点：

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

如何解决 //路由导航守卫钩子函数
//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() //必须调用，代码向后执行

}