在使用模块化的时候,路由通常被定义在index.js里面。
在点击路由标签的时候,绑定的路径会找到这个组件,然后将这个组件渲染到<router-view/>标签上
通过使用路由的keep-alive属性,可以在路由切换的时候,保证组件不会重复渲染。
当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。
index.js代码
import Vue from 'vue'
import Router from 'vue-router'
import TabBar from '@/comment/TabBar'
import School from '@/components/School'
import Company from '@/components/Company'
import Mine from '@/components/Mine'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'TabBar',
component: TabBar
},
{
path: '/school',
name: 'School',
component: School
},
{
path: '/company',
name: 'Company',
component: Company
},
{
path: '/mine',
name: 'Mine',
component: Mine
}
]
})
三个组件代码:
<template>
<div id="company">
<p>公司</p>
</div>
</template>
<script>
export default{
data(){
return {
}
}
}
</script>
<style>
</style>
导航栏代码:
<template>
<div id="tabbar">
<van-tabbar v-model="active">
<van-tabbar-item icon="shop"><router-link to="/school">智慧校园</router-link></van-tabbar-item>
<van-tabbar-item icon="chat" dot><router-link to="/company">公司库</router-link></van-tabbar-item>
<van-tabbar-item icon="records" :info="infoCount"><router-link to="/mine">我的</router-link></van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
import {Tabbar, TabbarItem} from "vant";
export default {
name : "TabBar",
props: [
//用来给组件赋值
],
data() {
return {
active: 0,
infoCount: 10
}
},
components:{
[Tabbar.name]:Tabbar,
[TabbarItem.name]:TabbarItem
}
}
</script>
<style scoped>
</style>
App.vue代码:
<template>
<div id="app">
<router-view/>
<TabBar></TabBar>
</div>
</template>
<script>
import TabBar from "./comment/TabBar"
export default {
name: 'App',
components:{
TabBar
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>