hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

Vue 完成行进革新,退却不革新的结果 玩转vue-router里的meta

2019-11-18杂谈搜奇网41°c
A+ A-
Vue 完成行进革新,退却不革新的结果 玩转vue-router里的meta。

需求一:

在一个列表页中,第一次进入的时刻,请求猎取数据。

点击某个列表项,跳到详情页,再从详情页退却回到列表页时,不革新。

也就是说从其他页面进到列表页,须要革新猎取数据,从详情页返回到列表页时不要革新。

解决方案

App.vue设置:

 

1  <keep-alive include="list">
2             <router-view/>
3   </keep-alive>

 

假定列表页为 list.vue,详情页为 detail.vue,这两个都是子组件。

我们在 keep-alive 增添列表页的名字,缓存列表页。

然后在列表页的 created 函数里增添 ajax请求,如许只要第一次进入到列表页的时刻才会请求数据,当从列表页跳到详情页,再从详情页返来的时刻,列表页就不会革新。
如许就能够解决问题了。

需求二:

在需求一的基础上,再加一个请求:能够在详情页中删除对应的列表项,这时候返回到列表页时须要革新从新猎取数据。

我们能够在路由设置文件上对 detail.vue 增添一个 meta 属性。

1  {
2            path: '/detail',
3            name: 'detail',
4            component: () => import('../view/detail.vue'),
5            meta: {isRefresh: true}
6        },

这个 meta 属性,能够在详情页中经由历程 this.$route.meta.isRefresh 来读取和设置。

设置完这个属性,还要在 App.vue 文件里设置 watch 一下 $route 属性。

 1 watch: {
 2        $route(to, from) {
 3            const fname = from.name
 4            const tname = to.name
 5            if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
 6                from.meta.isRefresh = false
 7                    // 在这里从新请求数据
 8            }
 9        }
10    },

如许就不须要在列表页的 created 函数里用 ajax 来请求数据了,一致放在 App.vue 里来处置惩罚。

触发请求数据有两个前提:

  1. 从其他页面(除了详情页)进来列表时,须要请求数据。

  2. 从详情页返回到列表页时,假如详情页 meta 属性中的 isRefresh 为 true,也需求从新请求数据。

 

当我们在详情页中删除了对应的列表项时,就能够将详情页 meta 属性中的 isRefresh 设为 true。这时候再返回到列表页,页面会从新革新。

 

 

vue-router:meta标签设置

 


先来看下官网链接:

https://router.vuejs.org/zh/guide/advanced/meta.html

实在官网链接给的引见并不多,只是引见了猎取meta的要领。

那末我们平常运用meta来做什么处置惩罚呢?

实在最主要的一个,我个人认为是照顾页面一些特别的标志,或许信息。

比方我们上边引见到的页面数据革新,以及页面显现,而且能够掌握页面内特别dome。

下面给人人引见下,我在开辟历程中运用到meta,来设置每个子组件的全局背景色彩。

另有一个主要的就是,设置面包屑。

 

meta设置各个页面的背景色

1.起首,我们在路由里边设置meta字段信息。

1 {
2     path: '/Hr-index/home',
3     name: 'home',
4     meta: [{
5       color:"#f2f2f2",
6     }],
7     
8     component: resolve => require(['文件途径'], resolve),
9   }

人人能够看到,我在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;
      }
    }
  },

就到这里吧,面包屑的话,下次再给人人聊,顶不住了~

有迷惑的能够留言哦~

 

 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
Vue 完成行进革新,退却不革新的结果 玩转vue-router里的meta

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/282327.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>