Vue-router监听路由，meta控制侧边栏是否出现

需求介绍

有时，我们会接到这样的设计稿：项目有一个侧边导航栏，显示一些列表的导航，在列表页，会有按钮点进每一个列表项item的详情页。在列表页时显示侧边栏，而在项目详情页要隐藏侧边栏。

项目结构介绍

在我的项目中，我先把整个项目的大框架，即header头部+sidebar侧边栏+app-main封装成一个layout组件，在vue-router中，每个path都会引用这个组件。

思路

由于不同的路由要控制sidebar是否出现，我们需要用到路由元信息meta字段来控制。meta官方文档
为meta设置一个hideSide属性，接着，由于每个路由都要重用到layout组件，要如何响应路由参数的变化呢？vue-router官方文档给出了两种方法。在这个例子中，因为没有用到动态参数，所以只能通过监听watch路由的变化来执行sidebar的切换，用v-if绑定showSide即可。

代码实现

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'

Vue.use(Router)

export const constantRoutes = [
  {
    path: '/',
    component: Layout,
    redirect: '/all',
    children: [
      {
        path: 'all',
        component: () => import('@/views/projectList/allPro'),
        name: '所有项目',
        meta: { title: '所有项目', icon: 'el-icon-menu', affix: true }
      }
    ]
  },
  {
    path: '/detail',
    component: Layout,
    redirect: '/detail',
    children: [
      {
        path: '',
        component: () => import('@/views/projectDetail/index'),
        name: '项目详情',
        meta: { hideSide: true, noCache: true }
      }
    ]
  },
]

const createRouter = () => new Router({
  routes: constantRoutes
})

const router = createRouter()
export default router

layout.vue布局

<template>
  <div :class="classObj" class="app-wrapper">
    <div :class="{'fixed-header':fixedHeader}">
      <navbar />
    </div>
    <div class="main-container">
      <sidebar v-if="showSide" class="sidebar-container" />
      <app-main :class="{'single': !showSide}" />
    </div>
  </div>
</template>

layout.vue逻辑

<script>
import { Navbar, Sidebar, AppMain } from './components'
import router from '@/router'

export default {
  name: 'Layout',
  components: {
    Navbar,
    Sidebar,
    AppMain
  },
  data() {
    return {
      showSide: true
    }
  },
  created() {
    this.getSide()
  },
  watch: {
    $route(to, from) {
      if (to.meta && to.meta.hideSide) {
        this.showSide = false
      } else {
        this.showSide = true
      }
    }
  },
  methods: {
    getSide() {
      let matched = this.$route.matched[0]
      if (matched.meta && matched.meta.hideSide) {
        this.showSide = false
      }
    },
  }
}