Vue生命周期、钩子、路由

生命周期

Vue生命周期
vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。

钩子

8个钩子函数
beforeCreate 创建Vue实例之前
created 创建实例成功（一般在这里实现数据的异步请求）
beforeMount 渲染DOM之前（加载组件第一次渲染）
mounted 渲染DOM完成（加载组件第一次渲染）
beforeUpdate 重新渲染之前（数据更新等操作控制DOM重新渲染）
updated 重新渲染完成
beforeDestroy 销毁之前
destroyed 销毁完成

生命周期钩子函数，可以在初始化实例时，添加自己的代码；
生命周期的钩子函数中的this，会默认指向Vue的实例;

beforeCreate created [可以获取数据及方法]
beforeMount mounted [可以获取到真实的DOM]
beforeUpdate updated [数据更新执行]
beforeDestroy destroyed [销毁vue实例，不再具有双向数据绑定的特点]

路由

1.路由的基本概念：
路由是一个比较广义和抽象的概念，路由的本质就是对应关系。
路由分为：前端路由 后端路由

2.前端路由：
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

3.Vue Router
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

基本使用方法：

脚手架使用Vue Router
//1.下载安装
yarn add vue-router | cnpm i vue-router -S

//2.引入vue-router
import router from 'vue-router'

//3.注册
Vue.use(router)

//4.配置路由表
const router = ({
    mode:路由的模式
    //路由表
    routes:[
        { path:'/news',component:News }
        { path:'/index',component:Index }
    ]
})

//5.把router实例注入到vue根实例，就可以使用路由
const app = new Vue({
    router
}).$mount('#app')

//6.在components或者views中创建好路由组件

//7.添加路由链接
<!-- router-link是vue中提供的标签，默认会被渲染成a标签 >
<!-- to属性默认会被渲染成herf属性 -->
<!-- to属性的值默认会被渲染成为#开头的hash地址 -->
<router-link to="news">news</router-link>
<router-link to="city">city</router-link>

//8.添加路由填充位置
<!-- 路由填充位(也叫路由占位符) -->
<!-- 将来规则而匹配到路由组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>

路由重定向
路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定的组件页面。
通过路由规则的redirect属性，指向一个新的路由地址，可以方便地设置路由的重定向

const routes = [
        //其中path表示的是需要被重定向的原地址，redirect表示将要被重定向的新地址
        { path:'/',
          redirect:'/user' 
         },
        { path:'/news',
          component:User 
         },
        { path:'/city',
         component:City 
         },
    ]

嵌套路由用法
1.父路由组件模板

父路由链接
父路由填充位
<div>
    <router-link to='/user'>User</router-link>
    <router-link to='/news'>News</router-link>
</div>
<div>
    <!-- 控制组件显示位置 -->
    <router-view></router-view>
</div>

嵌套路由

父级路由通过children属性配置子级路由
const  routes = [
        { path:'/user',
         component:User 
         },
        { 
            path:'/news',
            component:News,
            children:[
                { path:'/news/tab1',
                  component:Tab1 、
                 },
                { path:'/news/tab2',
                  component:Tab2 
                 },
            ]
        }，,
    ]   

动态路由
在某些情况，一个页面的path路径可能是不确定的，比如我们进入用户页面时，希望路径是：/user/userId，这种path和component的匹配关系称之为动态路由

{
	path:'user/userId',
	component:User
}

<div>
	<h2>{{$route.params.userId}}<h2/>
</div>

<route-link :to="'/user/'+userId">用户</route-link>

路由懒加载

懒加载也叫延迟加载，即在需要的时候进行加载，随用随载