| | |
| | | :key="index" |
| | | :id="'tags-box-' + index" |
| | | @contextmenu.prevent="openMenu(item, $event)" |
| | | :class="isActive(item.url, index) ? 'active' : ''" |
| | | :class="isActive(item.url, item.params,index) ? 'active' : ''" |
| | | class="tagsview" |
| | | @click="tagsmenu(item, index)" |
| | | > |
| | |
| | | }, |
| | | $route(to, from) { |
| | | this.tags.forEach((item, index) => { |
| | | if (item.url === to.path) { |
| | | if (item.url === to.path && item.index === to.query.index) { |
| | | const tagsDiv = document.getElementById('tags-box') |
| | | if (index) { |
| | | tagsDiv.scrollTo(index * 110, 0) |
| | |
| | | } |
| | | } else { |
| | | // 那么,如果上面的条件都不成立,没有length=0.也就是说你还有好几个标签,并且你删除的是最后一位标签,那么就往左边挪一位跳转路由 |
| | | this.$router.push({ path: this.tags[index - 1].url }) |
| | | this.$router.push({ path: this.tags[index - 1].url,query:{param: this.tags[index - 1].params} }) |
| | | } |
| | | } else { |
| | | // 如果你点击不是最后一位标签,点的前面的,那就往右边跳转 |
| | | this.$router.push({ path: this.tags[index].url }) |
| | | this.$router.push({ path: this.tags[index].url ,query:{param: this.tags[index].params}}) |
| | | } |
| | | }, |
| | | // 点击跳转路由 |
| | |
| | | // 判断:当前路由不等于当前选中项的url,也就代表你点击的不是现在选中的标签,是另一个标签就跳转过去,如果你点击的是现在已经选中的标签就不用跳转了,因为你已经在这个路由了还跳什么呢。 |
| | | if (this.$route.path !== item.url) { |
| | | // 用path的跳转方法把当前项的url当作地址跳转。 |
| | | this.$router.push({ path: item.url }) |
| | | this.$router.push({ path: item.url ,query:{param: this.tags[index].params}}) |
| | | const tagsDiv = document.getElementById('tags-box') |
| | | if (index) { |
| | | tagsDiv.scrollTo(index * 110, 0) |
| | |
| | | } |
| | | }, |
| | | // 通过判断路由一致返回布尔值添加class,添加高亮效果 |
| | | isActive(route, index) { |
| | | const res = route === this.$route.path |
| | | isActive(route,params, index) { |
| | | const res =(route === this.$route.path && params== this.$route.query.param) |
| | | return res |
| | | }, |
| | | scrollToStart() { |