Vue框架中实现页面跳转但不改变URL地址 - 使用Vue Router

<p>&quot;<template>\n  <div class="Polaris-Stack Polaris-Stack--distributionEqualSpacing Polaris-Stack--alignmentCenter" style="margin-top: 1px;border-bottom: 1px #c1c1c1 solid;padding: 5px;">\n    <div class="Polaris-Stack__Item">\n      <div class="Polaris-Stack Polaris-Stack--spacingTight Polaris-Stack--alignmentCenter">\n        <div class="Polaris-Stack__Item">\n          <div class="sc-1ibht3l-0 uqRZq"></div>\n          <div class="sc-1ibht3l-1 hIZedH">\n            <div class="Polaris-ButtonGroup">\n              <div class="Polaris-ButtonGroup__Item">\n                <a data-polaris-unstyled="true" class="Polaris-Button" href="index.html">\n                  <span class="Polaris-Button__Content">\n                    <span class="Polaris-Button__Text">Dashboard</span>\n                  </span>\n                </a>\n              </div>\n              <div class="Polaris-ButtonGroup__Item">\n                <a data-polaris-unstyled="true" class="Polaris-Button" href="zone.html">\n                  <span class="Polaris-Button__Content">\n                    <span class="Polaris-Button__Text">Checkout Zones</span>\n                  </span>\n                </a>\n              </div>\n              <div class="Polaris-ButtonGroup__Item">\n                <a data-polaris-unstyled="true" class="Polaris-Button" href="funnel.html">\n                  <span class="Polaris-Button__Content">\n                    <span class="Polaris-Button__Text">Funnels</span>\n                  </span>\n                </a>\n              </div>\n              <div class="Polaris-ButtonGroup__Item">\n                <a data-polaris-unstyled="true" class="Polaris-Button" href="help.html">\n                  <span class="Polaris-Button__Content">\n                    <span class="Polaris-Button__Text">Help Center</span>\n                  </span>\n                </a>\n              </div>\n              <div class="Polaris-ButtonGroup__Item">\n                <div>\n                  <button type="button" id="moreSeting" class="Polaris-Button" tabindex="0" aria-controls="Popover486" aria-owns="Popover486" aria-haspopup="true" aria-expanded="false">\n                    <span class="Polaris-Button__Content">\n                      <span class="Polaris-Button__Text">More</span>\n                      <span class="Polaris-Button__Icon">\n                        <span class="Polaris-Icon">\n                          <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">\n                            <path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>\n                          </svg>\n                        </span>\n                      </span>\n                    </span>\n                    <div id="dropdownContent" class="dropdown-content">\n                      <a href="payment.html">Payment</a>\n                      <a href="facebookPixel.html">Pixel</a>\n                    </div>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        showMore: false\n      };\n    },\n    methods: {\n      toggleMore() {\n        this.showMore = !this.showMore;\n      }\n    }\n  };\n</script>\n\n<code>\n\n如果你想在vue框架中实现页面跳转但URL保持不变，可以使用vue-router插件来实现。下面是一个基本的示例代码：\n\n</code>html\n<template>\n  <div>\n    <router-link :to="{ name: 'Dashboard' }">Dashboard</router-link>\n    <router-link :to="{ name: 'CheckoutZones' }">Checkout Zones</router-link>\n    <router-link :to="{ name: 'Funnels' }">Funnels</router-link>\n    <router-link :to="{ name: 'HelpCenter' }">Help Center</router-link>\n    &lt;a data-polaris-unstyled=&quot;true&quot; class=&quot;Polaris-Button&quot; @click=&quot;toggleMore&quot;&gt;\n      <span class="Polaris-Button__Content">\n        <span class="Polaris-Button__Text">More</span>\n        <span class="Polaris-Button__Icon">\n          <span class="Polaris-Icon">\n            <svg viewBox="0 0 20 20" class="Polaris-Icon__Svg" focusable="false" aria-hidden="true">\n              <path d="M5 8l5 5 5-5z" fill-rule="evenodd"></path>\n            </svg>\n          </span>\n        </span>\n      </span>\n    </a>\n    <div id="dropdownContent" class="dropdown-content" v-show="showMore">\n      <router-link :to="{ name: 'Payment' }">Payment</router-link>\n      <router-link :to="{ name: 'Pixel' }">Pixel</router-link>\n    </div>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        showMore: false\n      };\n    },\n    methods: {\n      toggleMore() {\n        this.showMore = !this.showMore;\n      }\n    }\n  };\n</script>\n\n<code>\n\n在这个示例中，我们使用了`&lt;router-link&gt;`组件来实现页面跳转，通过设置`to`属性来指定目标路由。`toggleMore`方法用于切换更多设置的下拉菜单的显示和隐藏。\n\n你还需要在Vue项目中安装并配置vue-router插件。在main.js中添加以下代码：\n\n</code>javascript\nimport VueRouter from 'vue-router';\nimport Dashboard from './components/Dashboard.vue';\nimport CheckoutZones from './components/CheckoutZones.vue';\nimport Funnels from './components/Funnels.vue';\nimport HelpCenter from './components/HelpCenter.vue';\nimport Payment from './components/Payment.vue';\nimport Pixel from './components/Pixel.vue';\n\nVue.use(VueRouter);\n\nconst routes = [\n  { path: '/', redirect: '/dashboard' },\n  { path: '/dashboard', name: 'Dashboard', component: Dashboard },\n  { path: '/checkout-zones', name: 'CheckoutZones', component: CheckoutZones },\n  { path: '/funnels', name: 'Funnels', component: Funnels },\n  { path: '/help-center', name: 'HelpCenter', component: HelpCenter },\n  { path: '/payment', name: 'Payment', component: Payment },\n  { path: '/pixel', name: 'Pixel', component: Pixel }\n];\n\nconst router = new VueRouter({\n  mode: 'history',\n  routes\n});\n\nnew Vue({\n  router,\n  render: h =&gt; h(App)\n}).$mount('#app');\n```\n\n这里我们定义了每个路由对应的组件，然后在routes数组中配置路由信息。<code>{ path: '/', redirect: '/dashboard' }</code>用于设置默认的路由。\n\n最后，我们创建了一个Vue实例，并将router实例传递给它，并通过<code>$mount()</code>将Vue应用挂载到DOM元素上。\n\n请注意，你需要在Vue项目中创建相应的组件文件（如Dashboard.vue、CheckoutZones.vue等），并在main.js中导入这些组件。\n\n这样，当你点击链接或按钮时，页面将会显示对应的组件内容，同时URL将保持不变。</p>