vue2.*+element+webpack在tabs中增加tab-pane，並載入不同元件
我們實現一個login頁面登陸後跳轉到word頁面，點選word頁面的導航選單，會在tabs裡增加tab-pane，並載入不同元件
1. App.vue配置
<template>
<div id="app">
<router-view v-bind:age="age"></router-view>
</div>
</div>
</template>
2 . login.vue配置
<template>
<div>
<h1>請先登陸</h1>
<div>
<el-input
placeholder="請輸入使用者名稱"
v-model="name"
clearable>
</el-input>
</div>
<div>
<el-input
placeholder="請輸入密碼"
v-model="age"
clearable>
</el-input>
</div>
<div>
<el-button type="primary" round @click="islogin">登陸</el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: '',
age:''
}
},
methods:{
islogin(){
if(this.name=='admin'&&this.age==123456){
this.$router.push('/word');
}
}
}
}
</script>
3. word.vue配置
<template>
<div>
<div class="left">
<el-row class="tac">
<el-col :span="24">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>導航一</span>
</template>
<el-menu-item-group>
<template slot="title">分組一</template>
<el-menu-item index="login" @click="jump">
Hello頁面
</el-menu-item>
<el-menu-item index="Hello" @click="jump">
word頁面
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分組2">
<el-menu-item index="1-3">選項3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">選項4</template>
<el-menu-item index="1-4-1">選項1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">導航二</span>
</el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document"></i>
<span slot="title">導航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">導航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
<div class="fff">
<ban ref="add"></ban>
</div>
</div>
</template>
<script>
import car from './dispatch.js'
import ban from './ban'
export default{
name:'word',
props:['age','name1'],
data(){
return{
msg:'我是Word元件',
recieveData:"",
title:'我是專案主入口',
word:'/word',
rr:'hello'
}
},
mounted(){
},
methods:{
handleOpen(key, keyPath) {
//console.log(this)
},
handleClose(key, keyPath) {
},
jump($el){
this.$refs.add.addTab('',$el.index);
}
},
components:{
//myhead,
ban
}
}
</script>
<style>
.title{
color:#f00;
}
.fff{
width:70%;
float:right;
}
a{
text-decoration:none;
}
.router-link-exact-active{
color:#f00;
}
.left{
float:left;
width:30%;
}
</style>
4 ban.vue的配置
<template>
<div class="a">
<div style="margin-bottom: 20px;">
<el-button
size="small"
@click.native="addTab"
>
add tab
</el-button>
</div>
<el-tabs v-model="editableTabsValue2" type="card" closable @tab-remove="removeTab">
<el-tab-pane
v-for="(item, index) in editableTabs2"
:key="item.name"
:label="item.title"
:name="item.name"
>
<component :is=item.content></component>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import login from './login'
import vue from 'vue'
import nr from './nr'
import car from './dispatch.js'
export default {
data() {
return {
aa:10,
editableTabsValue2: '1',
editableTabs2: [{
title: 'Tab 1',
name: '1',
content: '',
close:false
}, {
title: 'Tab 2',
name: '2',
content: login
}],
tabIndex: 2,
newTitle:'1',
newContent:''
}
},
mounted(){
},
methods: {
addTab(targetName,r){
let Acomponent = resolve => require([`./${r}`], resolve);
let newTabName = ++this.tabIndex + '';
this.editableTabs2.push({
title: r,
name: newTabName,
content:Acomponent
});
this.editableTabsValue2 = newTabName;
console.log(targetName,r)
},
removeTab(targetName, name){
let tabs = this.editableTabs2;
let activeName = this.editableTabsValue2;
if (activeName === targetName) {
tabs.forEach((tab, index) => {
if (tab.name === targetName) {
let nextTab = tabs[index + 1] || tabs[index - 1];
if (nextTab) {
activeName = nextTab.name;
}
}
});
}
this.editableTabsValue2 = activeName;
this.editableTabs2 = tabs.filter(tab => tab.name !== targetName);
console.log(targetName);
}
}
}
</script>
<style>
.a{
width:70%;
}
</style>
5. hello.vue配置
<template>
<div class="hello">
<h1 @click="info" :class="color">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'hello',
data () {
return {
msg: '我是Hello元件',
color:'color'
}
},
mounted(){console.log("我已經掛載了")},
methods:{
info(){
console.log('你點選了我');
}
}
}
</script>
<style>
.color{
color:#fff;
}
</style>
6 最後是路由配置 index.js
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import Word from '@/components/Word';
import login from '@/components/login';
import ban from '@/components/ban';
import Router1 from '@/components/Router1';
import Router2 from '@/components/Router2';
import Router3 from '@/components/Router3';
Vue.use(Router)
const rout = new Router({
mode: 'history', // 使用HTML5 History預設是雜湊值的方式
routes: [
{
path:'/',
component:login
},
{
path: '/login',
component:login
},
{
path:'/word',
component:Word
}
]
})
export default rout
7. main.js配置
import Vue from 'vue';
import Router from 'vue-router';
import App from './App';
import router from './router/index';
import 'element-ui/lib/theme-chalk/index.css';
import ElementUi from 'element-ui';
Vue.use(ElementUi);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render(h){
return h(App);
}
})
最後看一下效果
