一.后台管理侧边栏路由的跳转
以下代码仅供参考,建议自己多敲
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>