1.vue组件的分类

• 页面级组件

实现页面与页面之间的跳转

src/views/home/Home.vue
src/views/register/Register.vue

• 公共组件

多个页面 组件都可使用的通用组件 放在src/components 中

src/components/Btn.vue

• 业务组件

在某个页面 中进行使用 的组件，更多体现为 页面的某一模块或部分

src/views/home/components/Banner.vue

2.页面级组件的创建步骤

创 配 占位 测 四个步骤

• 创建.vue 文件

• 配置路由 一 一对应 router/index.js

//导入页面级组件
import Mine from '../views/my/Mine.vue'
const routes = [
    {
        path: "/mine",  //跳转的路由
        component: Mine    //对应的组件
  	},
]

• 父组件中需要 给子组件占位 app.vue

   <router-view></router-view>

• 测试 是否可以访问 手动切换路由地址

 http://localhost:8080/#/mine

3.路由的使用 页面跳转

vue-router 通过a标签 封装了一个组件 ：router-link

<router-link  to="页面的路径 path">  </router-link>

4.二级路由

 {
    path: "/",
    component: Home,
    children: [    //二级路由的配置
      {
        path: '/recommend',
        component: Recommend,
      },
      {
        path: '/top-list',
        component: TopList
      },
      {
        path: '/play-list',
        component: PlayList
      }
    ]
  },
  {
    path: '/my',
    component: My
  },
  {
    path: '/friend',
    component: Friend
  }

5.两个路由对象

• this.$route

this.$route.path   #当前页面的路由
this.$route.query   #获取页面的search参数  location.search   获取的值是一个对象
this.$route.params   #获取页面参数
this.$route.matched   #当前页面匹配的所有

• this.$router

this.$router.push('路由的地址 path ')     #在js中进行页面的跳转
this.$router.back()           #返回上一页  history.back()
this.$router.forward()        #前进一页
this.$router.go(数字)          #前进后退任意页面

6.vue生命周期 钩子函数

生命周期 就是 vue组件 从诞生到消亡整个过程

vue组件生命周期分为 四大阶段 8个钩子函数

钩子函数：当达到这个阶段 自动触发的某个函数

可以在生命周期的钩子函数中处理一些业务逻辑

所有的钩子函数 都是和data() 平级

#第一大阶段  create  创建阶段
beforeCreate()  #vue组件创建之前  组件中的任何资源都获取不到  可以获取到 Vue 顶级实例
created()     #vue组件创建完成  可以获取到 data（）里面的数据  

#第二大阶段  mount 挂载阶段
beforeMount()     # 挂载之前   可以获取data()   获取不到页面的dom
mounted()         # 挂载之后   可以获取所有的 dom 节点  

#第三大阶段   update  更新阶段
beforeUpdate()    #更新之前  
updated()         #更新之后   

#第四大阶段   destroy  销毁阶段
beforeDestroy(){
     #销毁之前触发
destroyed()        #销毁之后触发

常用钩子函数：

created() 进入页面请求数据，一般情况下 就created中进行请求

mounted() 可以获取dom data()和页面的dom 已经绑定 处理业务逻辑

beforeDestroy() 销毁页面之前 可以 清除定时器 移除事件监听

7.父子组件生命周期执行顺序

父beoforeCreate--->父created--->父beforeMount-->子beoforeCreate--> 子created-->子beforeMount-->子mounted-->父mounted