vue 实现前进刷新, 后退不刷新的效果 玩转 vue-router 里的 meta.
需求一:
在一个列表页中, 第一次进入的时候, 请求获取数据.
点击某个列表项, 跳到详情页, 再从详情页后退回到列表页时, 不刷新.
也就是说从其他页面进到列表页, 需要刷新获取数据, 从详情页返回到列表页时不要刷新.
解决方案
在 App.vue 设置:
- <keep-alive include="list">
- <router-view/>
- </keep-alive>
假设列表页为 list.vue, 详情页为 detail.vue, 这两个都是子组件.
我们在 keep-alive 添加列表页的名字, 缓存列表页.
然后在列表页的 created 函数里添加 Ajax 请求, 这样只有第一次进入到列表页的时候才会请求数据, 当从列表页跳到详情页, 再从详情页回来的时候, 列表页就不会刷新.
这样就可以解决问题了.
需求二:
在需求一的基础上, 再加一个要求: 可以在详情页中删除对应的列表项, 这时返回到列表页时需要刷新重新获取数据.
我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性.
- {
- path: '/detail',
- name: 'detail',
- component: () => import('../view/detail.vue'),
- meta: {isRefresh: true}
- },
这个 meta 属性, 可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置.
设置完这个属性, 还要在 App.vue 文件里设置 watch 一下 $route 属性.
- watch: {
- $route(to, from) {
- const fname = from.name
- const tname = to.name
- if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
- from.meta.isRefresh = false
- // 在这里重新请求数据
- }
- }
- },
这样就不需要在列表页的 created 函数里用 Ajax 来请求数据了, 统一放在 App.vue 里来处理.
触发请求数据有两个条件:
从其他页面 (除了详情页) 进来列表时, 需要请求数据.
从详情页返回到列表页时, 如果详情页 meta 属性中的 isRefresh 为 true, 也需求重新请求数据.
当我们在详情页中删除了对应的列表项时, 就可以将详情页 meta 属性中的 isRefresh 设为 true. 这时再返回到列表页, 页面会重新刷新.
vue-router:meta 标签配置
先来看下官网链接:
其实官网链接给的介绍并不多, 只是介绍了获取 meta 的方法.
那么我们一般使用 meta 来做什么处理呢?
其实最主要的一个, 我个人认为是携带页面一些特殊的标志, 或者信息.
比如我们上边介绍到的页面数据刷新, 以及页面显示, 并且可以控制页面内特殊 dome.
下面给大家介绍下, 我在开发过程中使用到 meta, 来设置每个子组件的全局背景颜色.
还有一个重要的就是, 配置面包屑.
meta 配置各个页面的背景色
1. 首先, 我们在路由里边配置 meta 字段信息.
- {
- path: '/Hr-index/home',
- name: 'home',
- meta: [{
- color:"#f2f2f2",
- }],
- component: resolve => require(['文件路径'], resolve),
- }
大家可以看到, 我在 meta 里面创建了一个 color 字段, 这里你就要去配置你需要的信息.
2. 在页面中获取 meta 标签中的信息, 进行 dome 操作
- document.getElementById(
- "el-main"
- ).style.background = this.$route.meta[0].color;
这里呢使用 document.getElementById 来对标签进行设置背景颜色,
通过 this.$route 可以获取到你配置的 meta 信息.
注意:
这里如果你需要进行路由跳转的话, 一定要监听一下, 重新赋值, 不然的话背景色不会动态改变.
- watch: {
- $route(to, from) {
- // 监听页面路由变化给页面添加背景颜色
- console.log("监听录音",this.$route);
- if (!this.$route.meta[0].color) {
- document.getElementById("el-main").style.background = "#e9eef3";// 如果没有配置 meta, 给页面一个默认颜色
- return;
- } else {
- document.getElementById(
- "el-main"
- ).style.background = this.$route.meta[0].color;
- }
- }
- },
就到这里吧, 面包屑的话, 下次再给大家聊, 顶不住了~
有疑惑的可以留言哦~
来源: https://www.cnblogs.com/yushihao/p/11798772.html