我们实现一个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">