Umi: 可以配置某些路由 不包含在全部layouts中吗,比如登陆页

Created on 7 Feb 2018  ·  11Comments  ·  Source: umijs/umi

type(discussion) type(question)

Most helpful comment

/Layouts/index.js

const ignoreLayout=['/login','/plan'];
if(ignoreLayout&&ignoreLayout.includes(pathname)){
     return (<div>{children}</div>)
}else{
     return (<div><Layout />{children}</div>)
}

All 11 comments

在路由里判断 location,然后区分输出?

@sorrycc 这样可以实现,不过页面过多可能比较麻烦

想不到好办法,你有建议吗?

新增一个ignoreLayout:['path']的配置项,匹配的放置到 <Layout></Layout>同级 ,你看这样可行吗

@zhang740 你觉得呢?

只能在layout文件里判断locaiton 的pathname,来选择是否加载layout整体布局了。

可以跟嵌套路由一起考虑吧 @sorrycc

约定大于配置,但提供双重支持。类似“umi 里约定,文件名或目录名里的 $ 会被替换为 :”,约定特定符号作为layout配置,让开发使用体验类似下面可以吗

  .
├── dist/                          
└── src/                           
    ├── layouts/
        ├── index.js               // 全局布局
        └── loginLayout.js         // login布局
    ├── pages/                     
        ├── .umi/                  
        ├── .umi-production/       
        ├── document.ejs           
        ├── list.js                
        ├── login#loginLayout.js   // login页面,指定使用loginLayout布局
        └── index.js               
    ├── global.css                 
    ├── _routes.json               // 路由配置,和文件路由二选一,增加布局配置支持
├── test/                          
├── .umirc.js                      
├── .webpackrc                     
└── package.json

像 hexo 这种工具,一般是把 layout 写在 md 文件内容里的:

---
layout: loginLayout
title: 
---

路由配置放文件名上已经足够复杂了,还是不太推荐约定全都放在文件名上。

/Layouts/index.js

const ignoreLayout=['/login','/plan'];
if(ignoreLayout&&ignoreLayout.includes(pathname)){
     return (<div>{children}</div>)
}else{
     return (<div><Layout />{children}</div>)
}

layouts也做成约定式

├── dist/                          
└── src/                           
 ├── layouts/
  ├── global.js               // 全局布局
  ├── users
   ├── global.js      // users路径下都读这个, 没设置就 layouts/global
   └── form.js        // users/form读这个, 没设置就 layouts/user/global, 再没就 layouts/global
  └── index.js                // index布局, 有就读这个, 没设置就 layouts/global
 ├── pages/                     
  ├── .umi/                  
  ├── .umi-production/       
  ├── document.ejs           
  ├── list.js      
  ├── users
   ├── form.js
   └── index.js
  └── index.js               
 ├── global.css                 
 ├── _routes.json 
├── test/                          
├── .umirc.js                      
├── .webpackrc                     
└── package.json
Was this page helpful?
0 / 5 - 0 ratings