vue+elementUI管理后台的列表页进入详情页

后台管理系统中经常要实现这样一个事儿,点击列表页的某一条,进入详情页,网上百度许久后,发现不能完全解决我的问题。在请教一位前端同学后,来总结下。
1,在列表页中定义点击跳转的方法:
openDetail:function (row) { this.$router.push({path:'newUserDetail',query:{id:row.id}}); },
2,在详情页接收这条数据的id:this.id = this.$route.query.id;

以上都在网上随处可查询,但是,在后台管理系统中注意的点是,列表页在左侧导航中显示tabbar,但详情页的入口只有列表页的“查看详情”按钮,因此,在显示列表和详情页面时,active状态始终在列表页的tabbar上,隐藏详情页的tabbar。在router.js文件中要这样写:
vue+elementUI管理后台的列表页进入详情页_第1张图片
而页面是根据当前所在页面的路由来给tabbar添加active,因此,在以上文件中又定义了meta属性,列表和详情的index都是列表页的path,这样在home.vue中,就可以判断啦,如下图:
vue+elementUI管理后台的列表页进入详情页_第2张图片
这样就可以正常跳转至详情页了,而且刷新页面时,默认打开当前页面所在的tabbar,进入详情页后,active状态也依然在列表页的tabbar上。
其中还有涉及到vue-router和vuex的知识点,一点点补吧。

你可能感兴趣的:(vue)