vue外卖二：引入/配置路由、底部固定导航按钮+样式+路由跳转

一、引入+配置路由

1.安装路由

// 不单单是生产环境部署，所以安装后，会在package.json内记录
cnpm install vue-router --save

2.写路由文件src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Msite from '../pages/Msite/Msite.vue'
import Order from '../pages/Order/Order.vue'
import Profile from '../pages/Profile/Profile.vue'
import Search from '../pages/Search/Search.vue'

//使用路由插件写法
Vue.use(VueRouter)

export default new VueRouter({
	//务必注意routes、component、等单词拼写，否则可造成路由跳转但不显示情况
	routes:[
		{
			path:'/',
			redirect:'/msite'
		},
		{
			path:'/msite',
			component:Msite
		},
		{
			path:'/order',
			component:Order
		},
		{
			path:'/profile',
			component:Profile
		},
		{
			path:'/search',
			component:Search
		}
	]
})

3.src/main.js挂载router

1. 引入2步写的router
2. 挂载router

// 入口文件
import Vue from 'vue'
import App from './App'
//1.引入
import router from './router/index.js'

new Vue({
	el: '#app',
	render: h => h(App),// vue2.0 es6写法
	//2.挂载
	router
})

4.创建底部导航按钮 公共组件src/common/FooterGuide/FooterGuide.vue

<template>
	<div>footerguide</div>
</template>

<script>
export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus">
	
</style>

5.app.js写入router-view及添加底导航公共组件

<template>
	<div id='app'>
		<!-- 1.写入路由显示 -->
		<router-view></router-view>
		<!-- 4.底部导航组件 -->
		<FooterGuide></FooterGuide>
	</div>
</template>

<script>
// 2.引入底部组件
import FooterGuide from './components/FooterGuide/FooterGuide.vue'

export default {
	//3.挂载底部组件
	components:{
		FooterGuide
	}
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

效果：

访问各路由：

1. http://localhost:8080/ 显示
   msite
   footerguide
2. http://localhost:8080/#/profile 显示
   profile
   footerguide
   ......略过

二、footerGuide组件

首先，改文件名原：common/stylue/common.styl为 mixins.styl
然后，在static/css/reset.css改如下代码88行

body {
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /*修改处：实现页面整体居中，并随页面大小自动改变尺寸*/
  width:100%;
  min-width: 320px;  /*一般最小智能手机的尺寸，再小就会影响浏览效果*/
  max-width: 640px;  /*iphone5*/
  margin:0 auto;  /*水平居中*/
}

1.编写静态页面src/components/FooterGuide/FooterGuide.vue

<template>
	<div class="footer_guide border-1px">
		<div class="guide_item on">
			<span class="item_icon">
				<i class="iconfont icon-waimai"></i>
			</span>
			<span>外卖</span>
		</div>
		<div class="guide_item on">
			<span class="item_icon">
				<i class="iconfont icon-search"></i>
			</span>
			<span>搜索</span>
		</div>
		<div class="guide_item on">
			<span class="item_icon">
				<i class="iconfont icon-dingdan"></i>
			</span>
			<span>订单</span>
		</div>
		<div class="guide_item on">
			<span class="item_icon">
				<i class="iconfont icon-geren"></i>
			</span>
			<span>我的</span>
		</div>
	</div>
</template>

<script>	
export default {}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
@import "../../common/stylus/mixins.styl"
	.footer_guide
		top-border-1px($bc)
		display flex
		position fixed
		bottom 0px
		
		z-index 99
		width 100%
		min-width 320px
		max-width 640px
		height 50px
	.guide_item
		flex 1
		text-align center

		margin 5px 
		color #999
		display flex
		flex-direction column
		align-items center
	&.on
		color #02a774
	span
		font-size 12px
		margin-top 2px
		margin-bottom 2px
		.iconfont
			font-size 22px

</style>

效果：http://localhost:8080/#/msite

2.编写逻辑

a.script部分

<script>	
export default {
	methods:{
		goTo(path){
			// 1.$router.replace()替换路由指向
			this.$router.replace(path)
		},
		isCurrent(path){
			// 2.$route.path注意此处route没有r，指的是当前路由
			console.log('mypath:'+this.$route.path)
			return this.$route.path === path
		}
	}
}
</script>

b.template部分，只写不同其它略过

<!-- 3.加上点击事件(实现点击跳转)，和类名绑定(实现当前路径显示不同颜色)。其它几处同此，不过path名不一样 -->
<div class="guide_item" 
	@click="goTo('/profile')" 
	:class="{on: isCurrent('/profile')}"
>

效果：点击按钮跳转对应组件，并让图标变色