一、下载vue-router
npm install vue-router --save
二、编码
1、在项目中新建文件夹 router/index.js
1 /* 2 * 路由对象模块 3 * */ 4 import Vue from 'vue' 5 import VueRouter from 'vue-router' 6 7 /*引入pages*/ 8 const MSite = ()=>import('../pages/MSite/MSite'); 9 const Profile = ()=>import('../pages/Profile/profile'); 10 const Patient = ()=>import('../pages/Patient/Patient'); 11 12 //申明使用插件 13 Vue.use(VueRouter) 14 15 export default new VueRouter({ 16 routes:[ 17 { 18 path:'/msite', 19 component: MSite, 20 meta: { 21 showFooter: true 22 } 23 }, 24 { 25 path:'/profile', 26 component:Profile, 27 meta: { 28 showFooter: true 29 } 30 }, 31 { 32 path:'/patient', 33 component:Patient, 34 meta: { 35 showFooter: false 36 } 37 }, 38 { 39 path: '/', 40 redirect: '/msite' //系统默认页 41 } 42 ] 43 })
2、在main.js中全局使用router
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 import router from './router' //引入路由 6 7 8 9 /* eslint-disable no-new */ 10 new Vue({ 11 el: '#app', 12 components: { App }, 13 template: '<App/>', 14 router //引入路由 15 })
3、路由准备好后，在页面中的使用
页面设计图：
1）新建组件：components/FooterGuide/FooterGuide.vue
1 <template> 2 <div class="footer_guide"> 3 <span class="guide_item" :class="{on: '/msite'===$route.path}" @click="goTo('/msite')"> 4 <span class="item_icon"> 5 <i class="mintui mintui-shouye"></i> 6 </span> 7 <span>首页</span> 8 </span> 9 <span class="guide_item" :class="{on: '/profile'===$route.path}" @click="goTo('/profile')"> 10 <span class="item_icon"> 11 <i class="mintui mintui-my"></i> 12 </span> 13 <span>我的</span> 14 </span> 15 </div> 16 </template> 17 18 <script> 19 export default { 20 methods: { 21 goTo(path) { 22 this.$router.replace(path) 23 } 24 } 25 } 26 </script> 27 28 <style lang="stylus" rel="stylesheet/stylus"> 29 @import "../../common/stylus/mixins.styl" 30 .footer_guide //footer 31 top-border-1px(#e4e4e4) 32 position fixed 33 z-index 100 34 left 0 35 right 0 36 bottom 0 37 background-color #fff 38 width 100% 39 height 50px 40 display flex 41 .guide_item 42 display flex 43 flex 1 44 text-align center 45 flex-direction column 46 align-items center 47 margin 5px 48 color #999999 49 &.on 50 color #02a774 51 span 52 font-size 12px 53 margin-top 2px 54 margin-bottom 2px 55 .iconfont 56 font-size 22px 57 </style>
2）在App.vue引入FooterGuide.vue组件 和 router-view 区域
1 <template> 2 <div id="app"> 3 <router-view></router-view> 4 <FooterGuide></FooterGuide> 5 </div> 6 </template> 7 <script> 8 import FooterGuide from './components/FooterGuide/FooterGuide.vue' 9 export default { 10 components: { 11 FooterGuide 12 } 13 } 14 </script>