导航栏的路由跳转
想要实现的效果,点击某个列表时,页面、会自动跳转到那个页面。
最开始构建页面时,使用的是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的作用是一样的