vue-router 프로그래밍 방식 탐색 및 태그는 마우스 오른쪽 버튼을 클릭하여 새 탭 페이지에서 링크를 여는 것을 실현합니다.

배경

브라우저가 구문 분석할 때 기본적으로 a标签오른쪽 클릭 표시 “在新标签页中打开链接”기능이 있지만 경우에 따라 a 태그를 사용하여 경로로 직접 점프하는 것이 적합하지 않은 경우도 있습니다. 예를 들어, 이 문제가 발생한 프로젝트에서 a 태그가 경로로 직접 점프하면 알 수 없는 이유로 버그가 발생하게 됩니다. 따라서 점프하려면 router.push만 사용할 수 있습니다.

아이디어

1. 먼저 a 태그를 제외하고 href로 바로 이동합니다. 내 프로젝트에 버그가 있을 것입니다.
2. 하지만 끝에는 a 태그가 있어야 합니다. 왜냐하면 이것이 브라우저가 태그를 구문 분석하는 방식이기 때문입니다 最快最亲近.
3. 그래서 contextmenu 이벤트를 사용하는데, 마우스 우클릭이 되지 않을 경우 직접 점프할 수 없는 라벨을 부여하고 vue-router를 이용하여 점프를 하게 된다.
4. contextmenu 이벤트를 수신한 후 해당 a 태그를 실제 태그로 바꿉니다 href可以跳转.
5. 간단히 말하면 vue-router는 마우스 클릭과 우클릭에 사용됩니다 a标签href.

성취하다

1. 템플릿 부분

        <div @click="onToggleMenu(item.icon)" v-for="item in menuList" :key="item.label" class="item" :class="{active: item.icon === activeTab}"
             @contextmenu="newtab($event, item.icon, item.label)">
          <a href="javascript:void(0);">
            <svg-icon style="position: relative; z-index: 99" :icon-class="item.icon" class="svg"></svg-icon>
            <span>{
   
   {item.label}}</span>
          </a>
        </div>

2. js 부분

data() {
    
    
	return {
    
    
	      menuList: Object.freeze([{
    
     label: 'A', icon: 'a' }, {
    
     label: 'B', icon: 'b' }, {
    
     label: 'C', icon: 'c' }, {
    
     label: 'D', icon: 'd' }]),
	}
}
methods:{
    
    
    newtab(e, name) {
    
    
      const uniqueSymbol = 'TARGET#_TIGER_360~-.'; // 避免和搜索语法语句重复的字段值 color: #b8bbcc
      const replaceStr = `<a href=#/${
      
      name} style="text-decoration: none; color: #b8bbcc">`;
      const matchList = e.currentTarget.innerHTML.match(/<a.*?>/g);
      let res = e.currentTarget.innerHTML.replace(/<a.*?>/g, uniqueSymbol);
      matchList.forEach(() => {
    
    
        res = res.replace(uniqueSymbol, replaceStr);
      });
      e.currentTarget.innerHTML = res;
    },
    onToggleMenu(name) {
    
    
      this.isShowFilter = false;
      this.updatefilterisCollapse(this.isShowFilter);
      this.resetParams();
      this.changeActiveTab(name);
      this.$router.push(`/${
      
      name}`); // 跳转
    },
}