vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理

引言 :看到网上关于此话题99%的解释都是错误的,遂写下了这篇文章。详情请翻至原理处。

场景:
导航条只在除登录注册以外的页面显示;
公共组件在部分页面显示,部分页面不显示。
方法:
router-view结合$route.meta
代码:

APP.vue中:




router.js中:

  • 需要显示公共组件中keepAlive的属性值为 true,不需要显示公共组件keepAlive的属性值为flase。
{
      path: '/DeveloperDocumentation',
      name: "DeveloperDocumentation",
      component: DeveloperDocumentation,
      meta: {
        keepAlive: true
      }
},

这样,导航条就只会在你设置keepAlive属性值为true的页面显示了。


原理:

在网上看到了很多的解释,99%都是keepAlive结合$route.meta。 下面用事实告诉你,这种说法是错误的。

  1. 监听路由
    vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理_第1张图片
    监听路由$router以后,路由变化后会发现meta属性中多出了刚才设置的keepAlive属性。

  2. meta

meta到底是什么?

在vue的官方文档中,meta属性这样定义:
vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理_第2张图片
  any任何
  所以你明白了吗?meta可以是任何属性。


  3. 实例

为了验证,我们把单词改为keep。
vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理_第3张图片
你会发现,效果依然是完美的!


甚至可以把true改为2,flase改为1。 APP.vue中的代码改为如下:

vue导航栏/公共组件在部分页面显示,部分页面不显示的方法及其原理_第4张图片
效果依然是正常的。

所以,一定不能只抄不想。

以上。

你可能感兴趣的:(VUE武功秘籍)