vue2.0導航菜單切換

css

 

*{
    margin:0;
    padding: 0;
  }
  ul li{
    list-style: none;
  }
  .navul{
    margin:100px auto 20px;
    overflow: hidden;
  }
  .navul li{
    background-color: #5597b4;
    padding:18px 30px;
    float:left;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
  }
  .active{
    background-color: #5597b4;
  }
  .home .home,.new .new,.contact .contact,.service .service{
    background-color: skyblue;
  }
  .checked{
       background: #eff4f7;
   }

第一種寫法

通過當前元素的下標對應當前點擊的元素

html

 

<div id="nav">
        <ul>
            <li v-for="(relation,index) in relations" v-bind:id="relation.id"  v-bind:id="relation.id" v-bind:class="{checked:index==nowIndex}"  v-on:click="relationClick(index)">
                <i></i>
                <span class="">{{relation.text}}</span>
            </li>
        </ul>
    </div>

js

 

 

<script src="js/vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    var nav = new Vue({
      el:'#nav',
      data:{
        relations: [
          {text:'項目',id:'program'},
          {text:'人員',id:'person'},
          {text:'機構',id:'organization'},
          {text:'技術',id:'tech'},
          {text:'地區',id:'location'},
          {text:'國家',id:'country'}
        ],
        nowIndex:-1,
      },
      methods:{
        relationClick:function(index){
          this.nowIndex=index;
        }
      }
    });
  </script>

第二種寫法

通過每條數據的特有屬性（例如，例子中的id屬性），點擊傳不同的參，對應當前點擊元素。

html

 

<div id="nav">
  <ul>
    <li v-for="(relation,index) in relations" v-bind:id="relation.id" v-bind:id="relation.id" v-bind:class="{checked:relation.id==nowId}" v-on:click="relationClick(relation)">
      <i></i>
      <span class="">{{relation.text}}</span>
    </li>
  </ul>
</div>

 

 

 

 

 

js：

 

<script type="text/javascript">
      var nav = new Vue({
        el:'#nav',
        data:{
          relations: [
            {text:'項目',id:'program'},
            {text:'人員',id:'person'},
            {text:'機構',id:'organization'},
            {text:'技術',id:'tech'},
            {text:'地區',id:'location'},
            {text:'國家',id:'country'}
          ],
          nowId:'',
        },
        methods:{
          relationClick:function(item){
            this.nowId=item.id;
          }
        }
      });
    </script>

 

 

 

 

 

第三種寫法

vue-router實現路由跳轉

main.js

import Vue from 'vue'
import router from './router'
// const iView  =  require('iview')


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

app.vue

<div class="viewbar">
    <router-view></router-view>
</div>

route文件裏index.js

 

import Vue from 'vue'
import Router from 'vue-router'

import Guide from './../pages/guideIndex/guideView.vue'
import Dispose from './../pages/disposedCenter/disposeIndex.vue'
import SystemIndex from './../pages/disposedCenter/systemSave/systemIndex.vue'
import LogIndex from './../pages/disposedCenter/logManage/logIndex.vue'
Vue.use(Router)

export default new Router({
  mode: 'hash',
  routes: [
    // 當無路由時，跳轉到概覽
    {
      path: '/',
      name: '',
      redirect: '/GeneralView'
    },
    // 概覽
    {
      path: '/GeneralView',
      name: 'GeneralView',
      component: Guide
    },
   
    // 二級菜單
    {
      path: '/DisposedCenter',
      name: 'DisposedCenter',
      // redirect: '/DisposedCenter/ApplationIndex',
      component: Dispose,
      children: [
        // 系統維護
        {
          path: 'Syetem',
          name: 'Syetem',
          component: SystemIndex
        },
        
        // 日誌管理
        {
          path: 'logManage',
          name: 'logManage',
          component: LogIndex
        },
      ]
    },    
   
  ]
})

頁面跳轉時

 

<router-link to='/Guide' tag='div'><a href="/Guide">首頁</a></router-link>
<router-link to='/Dispose' tag='div'><a href="/Dispose">概覽</a></router-link>

通過方法跳轉 

this.$router.push({ name: 'GeneralView', params: { auth:'' }});
// params爲路由附帶的參數

this.$router.push({ path: '/Guide/..',   query: { auth:'' }});