Home >Web Front-end >JS Tutorial >How to use Vue to integrate AdminLTE template
This time I will show you how to use Vue to integrate the AdminLTE template, and what are the precautions for using Vue to integrate the AdminLTE template. The following is a practical case, let's take a look.
The login verification and jump issues were solved last time, but there was a bug. In Vue's main.js, Vue-router's routing hook is used to determine whether protected resources can be accessed. The problem lies here. Fix the last bug first./* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录 */ router.beforeEach((to, from, next) => { if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })There is a problem in the code, that is, if you directly access /login without a token, an infinite loop will occur and cause overflow. The modified code is as follows
/* 全局路由钩子 访问资源时需要验证localStorage中是否存在token 以及token是否过期 验证成功可以继续跳转 失败返回登录页重新登录 */ router.beforeEach((to, from, next) => { if(to.path == '/login'){ next() } if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })Okay, let’s get to the point. Let’s talk about AdminLTE first. This is a back-end management template based on bootstrap. It is really a savior for people like me who are terrible at layout and design but need one person to handle everything. Let’s see how it works first.
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css'The effect after the introduction is like this
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css'The effect after introduction
configuration file. The file is located in the build folder of the project, and the file name is webpack.base.conf.js. Two new configurations need to be added to this file.
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' //bootstrap import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.min.js' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css' import './assets/js/app.min.js'Let’s take a look at the effect after the introduction
//bootstrap import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.min.js' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css' import './assets/js/app.min.js' //font-awesome import 'font-awesome/css/font-awesome.min.css'
导入后效果
还差一点完成了,我们还要处理一下Vue路由,使得我们在点击左侧导航时,需要显示的内容会出现在图中红框区域内。对应设备目录管理我们新建一个catalog.vue文件,先简单的包含一行内容即可。
<template> <h1>catalog</h1> </template>
在main.js中引入catalog并新增一条路由规则。注意这里我们使用了vue-router的嵌套路由,因为我们需要catalog.vue的内容嵌套在index.vue中显示。
//compinents import App from './App' import Login from './components/login' import Index from './components/index' import DeviceCatalog from './components/deviceCatalog' Vue.use(VueRouter) Vue.use(VueResource) Vue.http.options.emulateJSON = true; const routes = [ { path: '/login', component : Login },{ path: '/index', component: Index, children: [ { path: '/deviceCatalog', component: DeviceCatalog } ] }, ]
在index.vue中创建导航和路由出口(即catalog.vue要被放置的红色区域)
<!-- 路由导航 --> <router-link to="/deviceCatalog"> <i class="fa fa-cubes"></i> <span class="ch">设备目录管理</span> </router-link> <!-- 路由出口 --> <p class="content-wrapper" style="border-style:solid; border-color:red"> <!-- Main content --> <router-view style="margin-top:0px; padding:2px"></router-view> <!-- /.content --> </p>
点击设备目录管理,catalog.vue的内容就会出现在红色框区域内了
最后一步,我们需要一个退出功能,上一篇中我们把认证凭证放在了localStorage中,那么在退出时我们就需要删除localStorage中的信息,并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。
<!-- 绑定方法 --> <p class="pull-right"> <button v-on:click="logOut" class="btn btn-primary btn-flat ch">退出</button> </p> <!-- logout方法 --> <script> export default { // name: 'app', data() { return { displayName: localStorage.userDisplayName, } }, methods: { logOut: function(){ localStorage.clear(); this.$router.push('login') } } } </script>
全部搞定,最后还有一个奇怪的问题。在第一次登录后页面不能完整显示,需要刷新一次。不过如果手动制定红色区域的高度则不会出现,我搞了半天也不知问题出在哪里,如果有哪位老师知道的话请指点我一下,谢谢。
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of How to use Vue to integrate AdminLTE template. For more information, please follow other related articles on the PHP Chinese website!