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逻辑