Vue 路由元信息的使用例子（实现Footer组件在不同页面的显示和隐藏）

功能效果：在首页和搜索展示页显示Footer组件，在登录、注册页不显示Footer组件

实现：

我们可以根据组件上的$route获取当前路由的信息，通过路由来判断Footer组件的显示和隐藏。

配置路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象。

首先定义路由的时候可以配置meta字段

// 路由配置信息
export default [
    {
        path: "/home",
        component: Home,
        meta: { show: true }
    },
    {
        path: "/search/:keyword?",
        component: Search,
        meta: { show: true },
        name: "search",
        props: ($route) => ({ keyword: $route.params.keyword, k: $route.query.k })


    },
    {
        path: "/login",
        component: Login,
        meta: { show: false }
    },
    {
        path: '/register',
        component: Register,
        meta: { show: false }
    },
]

然后在使用Footer组件时使用v-show来控制它显示与否， 当$route.meta,show为true时才显示，否则就是隐藏的

<template>
  <div>
    <Header></Header>
    <!-- 路由组件出口的地方 -->
    <router-view></router-view>
    <!-- 在Home、Search显示，在登录、注册隐藏 -->
    <Footer v-show="$route.meta.show"></Footer>
  </div>
</template>