Vue初体验之Vue的组件和路由

83 阅读 0 评论 55 点赞

我是靠谱客的博主爱听歌小兔子，最近开发中收集的这篇文章主要介绍Vue初体验之Vue的组件和路由，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Vue初体验之Vue的组件和路由

1、Vue组件的分类

页面级组件：实现页面之间的相互跳转

公共组件：多个页面都需要使用的通用组件，放在src下面的components中

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

2、页面级组件的创建和路由配置步骤

创/导/配/找

在views目录下创建页面级组件
在router目录的index.js中导入组件

创建Vue项目时，手动配置vue特性下面将Router勾选上，就会有router目录

在router目录的index.js中配置路由，与组件一一对应

const routes = [
    {
        // 路由的重定向：修改路由的原地址，强制跳转到重定向的路径
        redirect: '路径'
    }
	{
		path: '路由路径',
		component: 导入的组件名
	}
]
// 测试：是否可以访问 手动切换路由地址

在需要使用页面级组件的父组件中找出口：

一级组件在根组件中找出口，二级组件在一级组件中找出口

3、路由的使用

实现页面的跳转，vue-router 通过a标签封装了一个组件：router-link

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

4、二级路由的配置

 const routes = {
    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
  }
// 三级四级相同，在父路由添加children即可，配置规则不变

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的生命周期共分为4大阶段，每个阶段有两个钩子函数

钩子函数：当达到这个阶段自动触发的某个函数，可以在生命周期的钩子函数中处理一些业务逻辑。所有的钩子函数都是和data() 平级

第一阶段：创建阶段
- beforeCreate: 创建前，vue的实例对象还没有创建好，不能操作data和methods
- created: 创建后，vue的实例对象已经创建好了，可以操作data和methods。在这个阶段发起请求，组件初始化
第二阶段：挂载阶段
- beforeMount: 挂载前，模板已经编译完成，但还存储在内存中，不能访问’dom节点’，可以获取data()
- mouted：挂载后，组件已经渲染到html文件中。可以访问’dom节点’
第三阶段：更新阶段
- beforeUpdate: 更新前，data里面的数据已更新，但没有同步到模板中；
- updated: 更新后，data里面的数据和模板中的数据已同步更新完成；
第四阶段：销毁阶段
- beforeDestroy: 销毁前，组件即将销毁。data, methods等选项依然存在。‘这个阶段可以清空定时器’
- destroyed: 销毁后，实例对象已销毁，内存空间被释放。