zoukankan      html  css  js  c++  java
  • vue-router 在项目中的使用

    一、下载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>
    View Code

    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> 
    View Code
  • 相关阅读:
    课堂作业04 2017.10.27
    课程作业 03 动手动脑 2017.10.20
    课程作业 03 2017.10.20
    HDU 3974 Assign the task
    POJ 2155 Matrix
    POJ 2481 Cows
    HDU 3038 How Many Answers Are Wrong
    CS Academy Array Removal
    POJ_1330 Nearest Common Ancestors LCA
    CF Round 427 D. Palindromic characteristics
  • 原文地址:https://www.cnblogs.com/flywong/p/10904449.html
Copyright © 2011-2022 走看看