需求介绍有时候，我们会收到这样的设计稿：项目有一个侧边导航栏，显示一些列表导航，在列表页面，有将按钮点击进入每个列表项item的详情页。侧边栏显示在列表页面，侧边栏隐藏在项目详情页面。项目结构介绍在我的项目中，我首先将整个项目的大框架，即header+sidebar+app-main封装成一个布局组件。在vue-router中，每条路径都会引用这个组件。思路因为不同的路由需要控制侧边栏是否出现，所以我们需要使用路由元信息的meta字段来控制。官方meta文档为meta设置了一个hideSide属性。那么，既然每条路由都要复用布局组件，那么如何响应路由参数的变化呢？vue-router官方文档给出了两种方法。本例中因为没有使用动态参数，所以只能通过监听watch路由的变化来进行侧边栏切换，showSide可以通过v-if进行绑定。代码实现router.jsimportVuefrom'vue'importRouterfrom'vue-router'importLayoutfrom'@/layout'Vue.use(Router)exportconstconstantRoutes=[{path:'/',component:Layout,redirect:'/all',children:[{path:'all',component:()=>import('@/views/projectList/allPro'),name:'所有项目',meta:{title:'所有项目',icon:'el-icon-menu',词缀:true}}]},{path:'/detail',component:Layout,redirect:'/detail',children:[{path:'',component:()=>import('@/views/projectDetail/index'),name:'项目详情',meta:{hideSide:true,noCache:true}}]},]constcreateRouter=()=>newRouter({routes:constantRoutes})constrouter=createRouter()exportdefaultrouterlayout.vue布局
