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

 

        

            

                
                {{relation.text}}
            
        
    

js

 

 

第二种写法

通过每条数据的特有属性（例如，例子中的id属性），点击传不同的参，对应当前点击元素。

html

 

  

    

      
      {{relation.text}}
    
  

 

 

 

 

 

js：

 

 

 

 

 

 

第三种写法

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: '',
  components: { App }
})

app.vue

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
        },
      ]
    },    
   
  ]
})

页面跳转时

 

首页
概览

通过方法跳转 

this.$router.push({ name: 'GeneralView', params: { auth:'' }});
// params为路由附带的参数

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