Vue(五)—分页组件—路由

一. 分页

下方操作将分页作为组件设置完之后就不需要重复写分页的代码了 只需要作为组件调用分页 通过数据互传即可完成分页操作

vue(四) 写了如何完成分页操作 这一章将分页单独提取出来 作为一个子组件使用 将调用分页的认定为父组件 分页认定为子组件 运用 子传父 父传子 来实现分页操作

  通过父组件将分页需要的数据如: 总数  默认每页多少条数据  默认第几页传到分页内 

  分页页面接收到数据 根据数据完成分页规划 将点击页数以及下拉每页多少条数据 两个方法传到父组件 在父组件进行接收使用 就完成了完整的分页操作

具体代码和注解如下:

1. 主页面 (父页面): 

2. 分页页面 (子页面):

 效果如下:

二. 设置默认访问页面

学习到这里我们应该知道访问 vue http://localhost:8080/ 默认页面是这样的 首先来说这个效果肯定不是我想要的所以设定一个默认的页面

redirect:’ 设置一个想要显示的地址 (下面自己定义的 path)’ 

三. 路由导航 嵌套路由

1. 什么是嵌套路由?

        嵌套路由的定义与正常路由的定义没有区别 只是设置了一个主路由 在路由里面家里一个 children 的方法 吧需要嵌套的路由写在其内即可

2. 嵌套路由的作用

嵌套路由一般用于设定主路由页面为导航 在主页面内设置几个按钮 点击每个按钮的时候显示不同的内容

3. 嵌套路由的使用

嵌套路由的使用也是很简单的 只需要在 vue 页面内加一个 方法即可 具体如下

4. 设置路由

路由的设定在 router 下面的 index.js 在上一张也有具体写过

普通路由的定义:

嵌套路由的定义:

5. 嵌套路由的调用 

我这里使用的是 ElementPulsUi 的模版

6. 效果如下