美文网首页
用路由参数控制左侧栏是否显示,以及页面动态布局

用路由参数控制左侧栏是否显示,以及页面动态布局

作者: 小呆糊总 | 来源:发表于2020-09-10 19:42 被阅读0次
需求描述:项目有些页面不需要左侧栏,有些需要左侧栏,左侧栏宽度是可配置的,以下是vue项目解决方法:

1.在根目录/static/config.js配置宽度(此文件通常配置一些共用文件,比如退出登陆地址,附件上传后的预览地址等信息,会随着打包也会打包,打包后也可修改配置)

(function() {
  window.globalConfig = {
    loginUrl:'',//登陆地址
    logoutUrl:'',//退出
    leftWidth: '240',// 左侧宽度
  }
})()

2.在/src/config/env.js增加配置

//引入全局配置
export const globalConfig = window.globalConfig || {}
const loginUrl = globalConfig.loginUrl
const logoutUrl = globalConfig.logoutUrl
const leftWidth = globalConfig.leftWidth
export {
  loginUrl,
  logoutUrl,
  leftWidth
}

3.在对应的vue组件里引入/src/config/env.js中的leftWidth,在路由传参时,根据hideLeft判断是否隐藏左侧栏,然后去除左侧栏的另一部分计算宽度

<template>
    <div :style="viewWidth" class="">
    </div>
</template>
import {leftWidth} from 'src/config/env'
computed:{
      viewWidth() {
          return {
              'width': `calc(100% - ${this.$route.meta.hideLeft ? 0 : leftWidth }px)`
          }
      }
  },

4.路由配置:以下是同一个组件,来源不同展示不同,根据路由判断是否显示左侧栏

export default [
  {
        name: 'noleftDetail',
        path: 'myproject/noleftDetail',
        meta: {
          name: '项目详情',
          hideLeft: true,
        },
        component: resolve => require(['views/myproject/detail'], resolve)
      },
      {
        name: 'detail',
        path: 'myproject/detail',
        meta: {
          name: '查看详情',
          hideLeft: false,
        },
        component: resolve => require(['views/myproject/detail'], resolve)
      },
]

相关文章

  • 用路由参数控制左侧栏是否显示,以及页面动态布局

    需求描述:项目有些页面不需要左侧栏,有些需要左侧栏,左侧栏宽度是可配置的,以下是vue项目解决方法: 1.在根目录...

  • vue-element-admin路由权限设置

    1、src/layout/Sidebar/index.vue,以下是控制左侧栏路由是否显示,通过permissio...

  • react-router:传参方式

    一、params传参(动态路由) 特点:刷新页面参数不消失,参数会在地址栏显示 1.路由配置 2.路由跳转 3.获...

  • vue的传参方式

    query方式 路由配置 接受参数页面 跳转界面时,传递的参数会显示在地址栏用?来分割 params模式 用nam...

  • Vue路由跳转后this.$bus.$on多次触发的问题

    路由跳转 地址栏显示参数,且页面刷新后参数不会消失.跳转: 获取参数 需要注意的是,路由跳转用 $router,获...

  • umi监听路由参数变化

    前言: 下午去帮小组伙伴看问题,路由参数发生改变,但是页面无法拿到最新的参数数据,做数据动态加载。 左侧为父级路由...

  • Tailwind Telegram

    响应式即时聊天布局方案 页面结构 页面布局 布局采用从左至右三栏布局,分别左侧区域、中间区域、右侧区域。 左侧区域...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • 谈谈 动态路由

    简述:动态路由就是在页面进行配置菜单,菜单配置的是已经存在的页面,根据角色来进行权限控制菜单的显示,然后根据配置用...

  • react-router 中 path 和 url 的关系

    在动态路由中其中, path 指的是路由的名称, 路径;url 指的是当前页面真实的地址, 也就是地址栏中显示的 ...

网友评论

      本文标题:用路由参数控制左侧栏是否显示,以及页面动态布局

      本文链接:https://www.haomeiwen.com/subject/ujypektx.html