Vue.js路由

在使用模块化的时候，路由通常被定义在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>