# 路由和侧边栏

// 设定路由的名字，当使用<keep-alive>时请务必填写，并且应该与引用的 component class 的 name 属性相同, 详细请看：https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
name: 'router-name'

// 当值为 noredirect 的时候该路由在面包屑导航中不可被点击
redirect: 'noredirect'

meta: {
  // 设置该路由进入的权限，支持多个权限叠加
  roles: ['admin', 'editor']

  // 设置该路由在侧边栏和面包屑中展示的名字
  title: 'title'

  // 设置该路由侧边栏的图标
  icon: 'svg-name'

  // 当设置 true 的时候该路由不会再侧边栏出现 如 401，login 等页面，或者如一些编辑页面 /edit/1, (默认 false)
  hidden: true

  // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
  // 若你想不管路由下面的 children 声明的个数，总是显示你的根路由
  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由 (默认 false)
  alwaysShow: true

  // 如果设置为 false，则不会在面包屑中显示 (默认 true)
  breadcrumb: false

  // 如果设置为 true，则不会被 <keep-alive> 缓存 (默认 false)
  noCache: true

  // 如果设置为 true, 则这个路由会被一直固定在 tags-view 的最前面 (默认 false)
  affix: true

  // 如果设置了值， 则侧边栏会高亮显示设置的值所指向的路由 (默认 空)
  activeMenu: '/example/list'
}

{
  path: '/permission',
  component: Layout,
  redirect: '/permission/directive', // 重定向地址，在面包屑中点击会重定向去的地址
  meta: {
    title: 'permission',
    icon: 'lock',
    roles: ['admin', 'editor'], // 你可以在根路由设置权限，这样它下面所以的子路由都继承了这个权限
    alwaysShow: true // 一直显示根路由
  },
  children: [
    {
      path: 'page',
      component: () => import(/* webpackChunkName: "permission-page" */ '@/views/permission/page.vue'),
      name: 'PagePermission',
      meta: {
        title: 'pagePermission',
        roles: ['admin']
      }
    },
    {
      path: 'directive',
      component: () => import(/* webpackChunkName: "permission-directive" */ '@/views/permission/directive.vue'),
      name: 'DirectivePermission',
      meta: {
        title: 'directivePermission'
      }
    },
    {
      path: 'role',
      component: () => import(/* webpackChunkName: "permission-role" */ '@/views/permission/role.vue'),
      name: 'RolePermission',
      meta: {
        title: 'rolePermission',
        roles: ['admin']
      }
    }
  ]
}

// 没有 submenu, 因为 children.length===1 并且没有设置 alwaysShow
{
  path: '/icon',
  component: Layout,
  children: [
    {
      path: 'index',
      component: () => import(/* webpackChunkName: "icons" */ '@/views/icons/index.vue'),
      name: 'Icons',
      meta: {
        title: 'icons',
        icon: 'icon',
        noCache: true
      }
    }
  ]
}

// 有 submenu, 因为 children.length>=1
{
  path: '/components',
  component: Layout,
  redirect: 'noRedirect',
  name: 'ComponentDemo',
  meta: {
    title: 'components',
    icon: 'component'
  },
  children: [
    {
      path: 'tinymce',
      component: () => import(/* webpackChunkName: "tinymce" */ '@/views/components-demo/tinymce.vue'),
      name: 'TinymceDemo',
      meta: { title: 'tinymce' }
    },
    {
      path: 'markdown',
      component: () => import(/* webpackChunkName: "markdown" */ '@/views/components-demo/markdown.vue'),
      name: 'MarkdownDemo',
      meta: { title: 'markdown' }
    },
  ]
}

clickLink(path) {
  this.$router.push({
    path,
    query: {
      t: +new Date() //保证每次点击路由的query项都是不一样的，确保会重新刷新view
    }
  })
}

const { fullPath } = this.$route

this.$nextTick(() => {
  this.$router.replace({
    path: '/redirect' + fullPath
  })
})

created() {
  const { params, query } = this.$route
  const { path } = params
  this.$router.replace({ path: '/' + path, query })
}

render() {
  // Avoid warning for missing template
}

{
  path: 'external-link',
  component: Layout,
  children: [
    {
      path: 'https://github.com/Armour/vue-typescript-admin-template',
      meta: {
        title: 'externalLink',
        icon: 'link'
      }
    }
  ]
}