app.vue
<template>
<div id="app">
<login></login>
<router-view/>
</div>
</template>
<script>
import login from "./components/login/login.vue"
export default {
name: 'App',
components:{
login
}
}
</script>
login.vue
<template>
<div class="login">
<form action="">
<input type="text" placeholder="请输入用户名/邮箱/手机号"><br>
<input type="password" placeholder="请输入密码">
<router-link :to="{name:'Tabbar'}"><input type="button" value="登陆" class="btn"/> </router-link>
</form>
</div>
</template>
tabbar.vue
<template>
<div class="tabbar">
<child @back="getValue" mark="home" :sel="select" title="首页">
<img src="../assets/ic_tab_home_normal.png" slot="active"/>
<img src="../assets/ic_tab_home_active.png" slot="normal"/>
</child>
<child @back="getValue" mark="team" :sel="select" title="团队">
<img src="../assets/ic_tab_subject_normal.png" slot="active"/>
<img src="../assets/ic_tab_subject_active.png" slot="normal"/>
</child>
<child @back="getValue" mark="salary" :sel="select" title="佣金">
<img src="../assets/ic_tab_status_normal.png" slot="active"/>
<img src="../assets/ic_tab_status_active.png" slot="normal"/>
</child>
<child @back="getValue" mark="check" :sel="select" title="考核">
<img src="../assets/ic_tab_group_normal.png" slot="active"/>
<img src="../assets/ic_tab_group_active.png" slot="normal"/>
</child>
<child @back="getValue" mark="personal" :sel="select" title="我的">
<img src="../assets/ic_tab_profile_female_normal.png" slot="active"/>
<img src="../assets/ic_tab_profile_female_active.png" slot="normal"/>
</child>
</div>
</template>
<script>
import child from "./child"
export default {
components: {
child
},
data: function () {
return {select: "home"}
},
methods: {
getValue: function (n) {
this.select = n;
}
}
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import Tabbar from '@/components/tabbar'
import Home from '@/components/home/home'
import Classify from '@/components/classify/classify'
import Team from '@/components/team/team'
import Salary from '@/components/salary/salary'
import Check from '@/components/check/check'
import Personal from '@/components/personal/personal'
Vue.use(Router);
export default new Router({
mode: 'history',
routes: [
{
path: '/tabbar',
name: 'Tabbar',
component: Tabbar,
},
{
path: '/home',
name: 'Home',
component: Home,
},{
path: '/salary',
name: 'Salary',
component: Salary,
redirect: {name: 'TermSearch'},
children:[
{path:"termSearch",name: 'TermSearch',component:TermSearch},
{path:"termAnalyse",name: 'TermAnalyse',component:TermAnalyse}
]
},
{
path: '/check',
name: 'Check',
component: Check,
redirect: {name: 'PersonWarn'},
children:[
{path:"personWarn",name: 'PersonWarn',component:PersonWarn},
{path:"teamWarn",name: 'TeamWarn',component:TeamWarn}
]
},
{
path: '/personal',
name: 'Personal',
component: Personal
},
]
})
点击登陆后跳转到首页
这是点击登陆后的效果，路由跳转到tabbar，login页面却还在，首页页面也没显示；
点击首页，home页面显示，tabbar又不显示了
是不是登录页面不能在app.vue里指定
求大佬指点