Vue框架中实现页面跳转但不改变URL的技巧

在Vue框架中，您可以使用<router-link>标签来实现在页面跳转的同时保持URL不变。以下是一个完整的代码示例：

<template>
  <div>
    <div class='Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter' style='margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;'>
      <div class='Polaris-Stack__Item'>
        <div class='Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter'>
          <div class='Polaris-Stack__Item'>
            <div class='sc-1ibht3l-0 uqRZq'></div>
            <div class='sc-1ibht3l-1 hIZedH'>
              <div class='Polaris-ButtonGroup'>
                <div class='Polaris-ButtonGroup__Item'>
                  <router-link to='/' class='Polaris-Button'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Dashboard</span>
                    </span>
                  </router-link>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <router-link to='/zone' class='Polaris-Button'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Checkout Zones</span>
                    </span>
                  </router-link>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <router-link to='/funnel' class='Polaris-Button'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Funnels</span>
                    </span>
                  </router-link>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <router-link to='/help' class='Polaris-Button'>
                    <span class='Polaris-Button__Content'>
                      <span class='Polaris-Button__Text'>Help Center</span>
                    </span>
                  </router-link>
                </div>
                <div class='Polaris-ButtonGroup__Item'>
                  <div>
                    <button type='button' id='moreSeting' class='Polaris-Button' tabindex='0' aria-controls='Popover486' aria-owns='Popover486' aria-haspopup='true' aria-expanded='false'>
                      <span class='Polaris-Button__Content'>
                        <span class='Polaris-Button__Text'>More</span>
                        <span class='Polaris-Button__Icon'>
                          <span class='Polaris-Icon'>
                            <svg viewBox='0 0 20 20' class='Polaris-Icon__Svg' focusable='false' aria-hidden='true'>
                              <path d='M5 8l5 5 5-5z' fill-rule='evenodd'></path>
                            </svg>
                          </span>
                        </span>
                      </span>
                      <div id='dropdownContent' class='dropdown-content'>
                        <!-- 这里放下拉列表的内容 -->
                        <router-link to='/payment' class='dropdown-link'>Payment</router-link>
                        <router-link to='/facebookPixel' class='dropdown-link'>Pixel</router-link>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Home',
  };
</script>

<style>
  @import '../style.css';
</style>

注意，我们使用<router-link>替换了原本的<a>标签，并在其中使用了to属性来指定目标URL。另外，我们还添加了一个class属性来为下拉列表中的链接添加样式。

您还需要在路由配置中添加相应的路径：

// 在路由配置中添加以下代码
import Payment from './components/Payment.vue';
import FacebookPixel from './components/FacebookPixel.vue';

const routes = [
  { path: '/payment', component: Payment },
  { path: '/facebookPixel', component: FacebookPixel },
  // 其他路由配置...
];

这样，当用户点击链接时，页面会根据路由配置进行跳转，同时URL不会改变。