vue_04路由跳转，路由传参，脚手架，生命周期

1. 路由跳转

2. 路由传参

3. 脚手架

4. 组件的生命周期:

5. 路由跳转:
   HTML中: 所有a换成 =>点击跳转
   运行时，自动翻译为
   
   js中: this.$router.push(“路径”) =>自动跳转
   $router就是var router=new VueRouter()路由器对象 要执行跳转这个动作，只能借助$router就是varrouter=newVueRouter()路由器对象要执行跳转这个动作，只能借助router
   凡是以$开头的，都是Vue内置的对象
   
   
   

6. 路由传参:
   2步:

7. 在路由字典中配置支持参数的相对路径:
   {path:"/details/:lid",component:Details,props:true}
   /:lid: 将来请求details页面时必须携带一个lid参数
   比如: /details/5
   在details页面中获取参数:
   this.$route.params.lid
   如果定义了props:true，lid参数会自动传递给props中同名的属性: props:[“lid”]
   this.lid=5

8. 跳转时: <router-link to="/details/5"
   

9. 组件生命周期:
   什么是: 一个组件创建的过程
   包括: 4个阶段:

10. create: 创建阶段:
    创建组件对象，以及模型对象data
    2个钩子函数:
    beforeCreate() 创建对象前触发
    created() 创建对象和data数据后触发
    有data 可以axios发送ajax请求
    没有虚拟DOM 暂时不能操作DOM元素

11. mount: 挂载阶段
    生成虚拟DOM树，绑定数据到真实的DOM树上
    beforeMount() 挂载阶段开始前自动触发
    mounted() 挂载后自动触发
    有data 可以axios发送ajax请求
    有虚拟DOM，可执行DOM操作

12. update: 更新阶段
    当组件的模型数据被更新时自动触发
    beforeUpdate()
    updated()

13. destroy: 销毁阶段
    除非调用专门的destroy函数，才能触发destroy阶段
    beforeDestroy()
    destoryed()

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200402184533128.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTgwNzU0NQ==,size_16,color_FFFFFF,t_70