vue后台系统layout组件

一般的后台系统都是分左右不分的，左侧是导航栏，右侧是主要内容，大致是这种的，我是参考这个开源的项目做的，https://github.com/PanJiaChen/vue-element-admin，但是做了一些改进

image.png
首先项目中安装使用路由，然后创建router.js
注意

// 自动检测路由是否存在于所有的路由中
  {
    path: '*',
    component: () => import('@/views/error-page/404'),
    hidden: true,
  }

image.png
项目中的这个文件是大致的框架，路由文件中引用
image.png
在这我做了路由重定向，修改了文件中的
image.png
image.png
在路由文件中记得加
image.png
redirect/index文件

<script>
export default {
  created() {
    const { params, query } = this.$route;
    const { path } = params;
    this.$router.replace({ path: '/' + path, query });
  },
  render: function(h) {
    return h(); // avoid warning message
  }
};
</script>