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布局

layout.vue逻辑