vue-router 在項目中的使用

一、下載vue-router

npm install vue-router --save

二、編碼

1、在項目中新建文件夾 router/index.js

/*
* 路由對象模塊
* */
import Vue from 'vue'
import VueRouter from 'vue-router'

/*引入pages*/
const MSite = ()=>import('../pages/MSite/MSite');
const Profile = ()=>import('../pages/Profile/profile');
const Patient = ()=>import('../pages/Patient/Patient');

//申明使用插件
Vue.use(VueRouter)

export default new VueRouter({
  routes:[
    {
      path:'/msite',
      component: MSite,
      meta: {
        showFooter: true
      }
    },
    {
      path:'/profile',
      component:Profile,
      meta: {
        showFooter: true
      }
    },
    {
      path:'/patient',
      component:Patient,
      meta: {
        showFooter: false
      }
    },
    {
      path: '/',
      redirect: '/msite' //系統默認頁
    }
  ]
})

2、在main.js中全局使用router

 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' //引入路由



/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router  //引入路由
})

 

3、路由準備好後，在頁面中的使用

 

1）新建組件：components/FooterGuide/FooterGuide.vue

<template>
  <div class="footer_guide">
    <span class="guide_item" :class="{on: '/msite'===$route.path}" @click="goTo('/msite')">
      <span class="item_icon">
        <i class="mintui mintui-shouye"></i>
      </span>
      <span>首頁</span>
    </span>
    <span class="guide_item" :class="{on: '/profile'===$route.path}" @click="goTo('/profile')">
      <span class="item_icon">
        <i class="mintui mintui-my"></i>
      </span>
      <span>我的</span>
    </span>
  </div>
</template>

<script>
  export default {
    methods: {
      goTo(path) {
        this.$router.replace(path)
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
   @import "../../common/stylus/mixins.styl"
  .footer_guide  //footer
    top-border-1px(#e4e4e4)
    position fixed
    z-index 100
    left 0
    right 0
    bottom 0
    background-color #fff
    width 100%
    height 50px
    display flex
    .guide_item
      display flex
      flex 1
      text-align center
      flex-direction column
      align-items center
      margin 5px
      color #999999
      &.on
        color #02a774
      span
        font-size 12px
        margin-top 2px
        margin-bottom 2px
        .iconfont
          font-size 22px
</style>

2）在App.vue引入FooterGuide.vue組件 和 router-view 區域

<template> 
    <div id="app"> 
        <router-view></router-view> 
        <FooterGuide></FooterGuide>
    </div> 
</template>
<script> 
    import FooterGuide from './components/FooterGuide/FooterGuide.vue'
    export default { 
        components: { 
            FooterGuide 
        } 
    }
</script>

 完