vue-admin-template模板添加tagsview
参考:
https://github.com/PanJiaChen/vue-admin-template/issues/349
一、从vue-element-admin复制文件:
vue-admin-template\src\layout\components\TagsView 文件夹
vue-admin-template\src\store\modules\tagsView.js
#vue-admin-template\static 文件夹
#vue-admin-template\src\lang 文件夹
#vue-admin-template\src\utils\i18n.js
二、修改 vue-admin-template\src\layout\components\AppMain.vue :AppMain.vue文件,新增以下内容:
<template>
<section class="app-main">
<transition name="fade-transform" mode="out-in">
<!-- <router-view :key="key" />-->
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>
</transition>
</section>
</template>
export default {
name: 'AppMain',
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
}/*,
key() {
return this.$route.path
}*/
}
}
<style lang="scss" scoped>
.app-main {
/*50 = navbar */
min-height: calc(100vh - 50px);
width: 100%;
position: relative;
overflow: hidden;
}
.fixed-header + .app-main {
padding-top: 50px;
} .hasTagsView {
.app-main {
/* 84 = navbar + tags-view = 50 + 34 */
min-height: calc(100vh - 84px);
} .fixed-header+.app-main {
padding-top: 84px;
}
}
</style>
三、修改vue-admin-template\src\layout\components\index.js,新增如下行:
export { default as TagsView } from './TagsView'
四、vue-admin-template\src\layout\index.vue
<template>
<div :class="classObj" class="app-wrapper">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
<sidebar class="sidebar-container" />
<div class="main-container">
<div :class="{'fixed-header':fixedHeader}">
<navbar />
</div>
<tags-view /> <!-- 此处增加tag-->
<app-main />
</div>
</div>
</template>
import { Navbar, Sidebar, AppMain, TagsView } from './components'
components: {
Navbar,
Sidebar,
AppMain,
TagsView
},
五、修改 vue-admin-template\src\store\getters.js,增加:
visitedViews: state => state.tagsView.visitedViews,
cachedViews: state => state.tagsView.cachedViews,
六、修改 vue-admin-template\src\store\index.js
import tagsView from './modules/tagsView'
const store = new Vuex.Store({
modules: {
app,
permission,
settings,
tagsView,
user
},
getters
})
七、修改 vue-admin-template\src\main.js
import i18n from './lang' // Internationalization
new Vue({
el: '#app',
router,
store,
i18n,
render: h => h(App)
})
八、修改vue-admin-template\src\settings.js 添加
tagsView: true,
九、修改vue-admin-template\src\store\modules\settings.js
const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings const state = {
showSettings: showSettings,
tagsView: tagsView,
fixedHeader: fixedHeader,
sidebarLogo: sidebarLogo
}
================================================
解决控制台报错:
1、删除vue-admin-template\src\layout\components\TagsView\index.vue中routes方法
(因为没有用到权限校验)
2、遍历标签时可能报错
vue-admin-template模板添加tagsview的更多相关文章
- Vue组件template模板字符串几种写法
在定义Vue组件时,组件的模板template选项需要的是一个字符串,当其内容较复杂需要换行时,需要简单处理一下,具体有五种方式: 方式一:使用 \ 转义换行符 <!DOCTYPE html&g ...
- Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用
template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- 一字一句的搞懂vue-cli之vue webpack template配置
webpack--神一样的存在.无论写了多少次,再次相见,仍是初见.有的时候开发vue项目,对尤大的vue-cli感激涕零.但是,但是,但是...不是自己的东西,真的很不想折腾.所以,我们就得深入内部 ...
- django基础2: 路由配置系统,URLconf的正则字符串参数,命名空间模式,View(视图),Request对象,Response对象,JsonResponse对象,Template模板系统
Django基础二 request request这个参数1. 封装了所有跟请求相关的数据,是一个对象 2. 目前我们学过1. request.method GET,POST ...2. reques ...
- Ace - Responsive Admin Template
Ace简介: Ace 是一个轻量.功能丰富.HTML5.响应式.支持手机及平板电脑上浏览的管理后台模板,基于CSS框架Bootstrap制作,Bootstrap版本更新至 3.0,Ace – Resp ...
- ECSHOP Inject PHPCode Into \library\myship.php Via \admin\template.php && \includes\cls_template.php Vul Tag_PHP_Code Execute Getshell
目录 . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 PHP语言作为开源社区的一员,提供了各种模板引擎,如FastTemplate,Sm ...
- vue 使用Jade模板写html,stylus写css
vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...
- Vue 下拉列表 组件模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- jquery无缝向上滚动实现代
<!DOCTYPE html><html><head><style type="text/css">.renav{width:200 ...
- CommonsMultipartResolver 文件上传
依赖 <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fi ...
- csp-s模拟测试60
csp-s模拟测试60 2019-10-05 RT. 又颓又垃圾. 状态低迷,题都交不上去. 交了也是爆零,垃圾玩家没有什么可说的,就是垃圾. A. 嘟嘟噜 $mlogn$的毒瘤做法. 贴 ...
- System.Web.Mvc.HttpOptionsAttribute.cs
ylbtech-System.Web.Mvc.HttpOptionsAttribute.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutra ...
- QT之QSettings 学习
1.读写配置文件. 代码如下: //创建配置文件 QSettings iniFile(QCoreApplication::applicationDirPath()+"/test.ini&qu ...
- 第十篇:javaScript中的JSON总结
参考网站:json中国,MDN json 一.必知基础 JSON 是JavaScript对象文字符号的一个子集,它可以自如的在JavaScript中使用.看下这个对象: var myJSONOb ...
- <每日一题>题目12:列表解析及zip、dict函数的简单应用
''' 分析: 1.列表解析:迭代机制的一种应用 语法: [expression for iter_val in iterable] [expression for iter_val in itera ...
- MediatR 知多少 - 简书
原文:MediatR 知多少 - 简书 引言 首先不用查字典了,词典查无此词.猜测是作者笔误将Mediator写成MediatR了.废话少说,转入正题. 先来简单了解下这个开源项目MediatR(作者 ...
- jsp 引入js、css修改后有缓存不及时更新
解决:(增加随机版本号) <link rel="stylesheet" type="text/css" href="css/1.css?v=&l ...
- css 图片波浪效果
参考:https://blog.csdn.net/zhichaosong/article/details/80944924#_99 效果: wave2.png html: <!DOCTYPE h ...