手把手教你用VUE(X)写后台管理系统.(一)左侧菜单栏

以下代码仅供参考,建议自己多敲
1.用vue create xxx 命令新建一个文件(前提你的电脑上已经安装过vue)
2.写这个后台我们需要用element-ui,不懂的一定要去官方文档看一哈,本节的内容主要是先生成一个最基本的框架,实现子路由的页面跳转
写这个后台肯定会涉及到很多路由,
每个文件夹存放的文件
src/router/index: 存放、引入路由
src/views/ 新建每个页面的路由
plugins/ element下载后自动生成的
手把手教你用vue(x)写后台管理系统(二)-菜单渲染

1.登陆页

1.1 登陆页(页面,后面再做功能)

router文件里的index.js 是存放路由文件的

  {
    path:'/login',
    component:login
  }
]
1.2 view中新建一个登陆路由login.vue
  <div>登陆</div>
</template>
1.3 在router-index.js 中引入

import login from '@/views/login.vue'
引入之后把项目启动

1.4 首页

登陆页面做好后之后,我们就要进去首页
在router-index.js中 引入首页路由

    path:'/',
    component:index
  }
1.4.1 404页面不存在

接着和登陆路由一样,在views中新建index.vue,然后在router-index.js中引入

ps:如果我们访问了一个不存在的页面呢? 这就需要新建一个404页面,当我们访问不存在的路由时,将页面跳转到404

   path:'/*',
   component:()=>import('@/views/error/404.vue')

注意: /* 的意思是匹配所有,不能把这个放在其他路径的上面,一旦把这个放上面 就会匹配不到其他的路由了,前面的优先级更高

2.布局

首页中搭建我们想要的结构,在src新建一个lauout(布局)文件夹
我们要清楚,我们要的页面布局是什么样的,是整体上下左右布局还是其它,然后在element-ui中找布局
Container布局容器:
el-container:外层容器。当子元素中包含 或 时,全部子元素会垂直上下排列,否则会水平左右排列。(具体查element-ui 文档)
el-header:顶栏容器。
el-aside:侧边栏容器。
el-main:主要区域容器。
el-footer:底栏容器.

2.1 然后在新建的Layout中新建一个index.vue,然后利用 局部注册 ,在首页路由中
import Layout from '@/Layout'   //index比较特殊,在这里可以省略
components:{
    Layout
  }
记得写<Layout></Layout>标签
2.2 接下来我们只需要在/Layout/index.vue中写布局了(提前下载好element组件,最新命令: vue add element,下载好后,把自动生成的app.vue里的东西删了)
<!-- 外层容器 -->
  <el-container>  
    <!-- 侧边栏容器 -->
    <el-aside> 左侧</el-aside> 
    <!-- 外层容器 -->
  <el-container>
    <!-- 顶栏容器 -->
    <el-header>头部</el-header>
    <!-- 主要区域容器 -->
    <el-main></el-main>
  </el-container>        
  </el-container> 
2.3 在layout/index.vue/中, 找到er-main标签 ,因为这里面的内容未来要切换,所以要给他加上keep-alive标签
<keep-alive></keep-alive>
keep-alive用法:
activated:   keep-alive组件激活时调用
deactivated: keep-alive组件停用时调用
<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们
<keep-alive> 是一个抽象组件:它自身不会渲染一个DOM元素,也不会出现在父组件链中
当组件在<keep-alive>内被切换,它的activated和deactivated这两个生命周期钩子函数将会被对应执行
<el-main>
       <keep-alive>
        <!-- 这个router-view里的内容未来要切换,所以给他加上keep-alive -->
        <router-view :key="$router.fullPath"></router-view>
      </keep-alive>
</el-main>

在这里插入图片描述

2.5做到这里后,就会产生很多细节错误,比如页面的高度不
  • 7
    点赞
  • 48
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值