vue はアンカーポイントをクリックした後にページを手動で更新し、空白が表示されます

1. タグのアンカー リンクを手動で更新すると、ページが空白で表示されます。

   <li
       v-for="(item, index) in listTow2"
              :key="index"
              :class="{ current: index == isActive2 }"
              @click="check(index)"
            >
              <div class="yinying">
                <a  style="
                  " :href="'#' + item.pus">  {
   
   { item.name }}</a></div>
                 
            </li>
             //  :href=" '#' + item.pus"   要加上一个#

2.js

  data() {
    return {
      listTow2: [
        { name: "公告通知", pus: "#anchor_0" },
        { name: "检测服务", pus: "#anchor_1" },
        { name: "报告服务" , pus: "#anchor_2"},
        { name: "检测机构" , pus: "#anchor_3"},
        { name: "客户服务" , pus: "#anchor_4"},
      ],
     
    };
  },

3. htmlのidも動的に記述する必要がある

 <div :id="listTow2[0].pus"></div>
 <div :id="listTow2[1].pus"></div>
 <div :id="listTow2[2].pus"></div>
 <div :id="listTow2[3].pus"></div>
 <div :id="listTow2[4].pus"></div>

4. ページのアドレスバーにある URL を更新すると、同様に表示されなくなります。

ここに画像の説明を挿入します
ここに画像の説明を挿入します
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_53587375/article/details/120270380