Layout theme

布局 & 主题

整体布局包括：

• 头部导航条 main-navbar
• 左侧边栏 main-sidebar
• 中间内容展示 main-content

对应代码在 src/views/main.vue

renren-vue-fast中除去404、login页面，其它页面都是基于这个布局的。这里我将无需嵌套上左右整体布局的路由称为“全局路由”放在globalRoutes常量中，需嵌套上左右整体布局的路由称为“主入口路由”放在mainRoutes常量的children属性中。

对应代码在 src/router/index.js

// 全局路由(无需嵌套上左右整体布局)
const globalRoutes = [
  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
  { path: '/#', component: _import('common/#'), name: 'login', meta: { title: '登录' } }
]

// 主入口路由(需嵌套上左右整体布局)
const mainRoutes = {
  path: '/',
  component: _import('main'),
  name: 'main',
  redirect: { name: 'home' },
  meta: { title: '主入口整体布局' },
  children: [
    // 通过meta对象设置路由展示方式
    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
    { path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
    {
      path: '/demo-01',
      component: null, // 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
      name: 'demo-01',
      meta: {
        title: '我是一个通过iframe嵌套展示内容, 并通过tab打开 demo',
        isTab: true,
        iframeUrl: 'http://fast.demo.renren.io/'
      }
    }
  ],
  beforeEnter (to, from, next) {
    let token = Vue.cookie.get('token')
    if (!token || !/\S/.test(token)) {
      next({ name: 'login' })
    }
    next()
  }
}

const router = new Router({
  mode: 'hash',
  scrollBehavior: () => ({ y: 0 }),
  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
  routes: globalRoutes.concat(mainRoutes)
})

同时，主入口路由提供meta对象2个属性设置路由展示方式。

isTab: 是否通过tab展示内容

iframeUrl: 是否通过iframe嵌套展示内容

如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!