v-for 实现导航栏的路由跳转

导航栏的路由跳转

想要实现的效果，点击某个列表时，页面、会自动跳转到那个页面。
最开始构建页面时，使用的是7个li，先将页面布局写好。
实现的办法是：
使用v-for，循环li，点击的时候动态获取各自的跳转路由

             <ul role="menubar" class="el-menu--horizontal el-menu" :class="$style.d_el_menu">
                  <li  role="menuitem" tabindex="0" class="el-menu-item" :class="$style.d_el_menu_item"
                  style="border-bottom-color: transparent; font-size: 0.24rem;"
                  v-for="item in list" :key="item.id" @click="go(item.router)">{{item.name}}</li>
              </ul>

 data () {
    return {
      list: [{
        name: '首页', router: '/index'
     }, {
        name: '访客登录', router: '/visiter'
      },{
        name: '设备管理',router: '/device'
      }, {
        name: '人事管理', router: '/suffer'
      }, {
        name: '权限管理', router: '/power'
      }, {
        name: '考勤管理', router: '/check'
      }, {
        name: '统计分析', router: '/counte'
      },  {
        name: '账号管理', router: '/account'
      }]
    }

  methods: {
    go (ip) {
      this.$router.push({path: ip})
    }
  }

这样就可以实现效果，当然，跳转页面还有其他方法：

    <li v-for="item in list" :key="key">
      <router-link :to="‘/’ + item.router"></router-link>
    </li>

这样也可以实现，这里的to和上面的push的作用是一样的