根据你提供的代码,我们可以看到你使用了Vue Router的<router-link>组件来实现页面跳转。根据你的描述,你希望在点击链接后页面跳转到目标页面,但URL保持不变。

要实现这个功能,你需要在Vue Router的配置中添加mode: 'history'选项。这将使用HTML5 History API来管理路由,并且不会在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">
                        <!-- 这里放下拉列表的内容 -->
                        <a href="payment.html">Payment</a>
                        <a href="facebookPixel.html">Pixel</a>
                      </div>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

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

然后,在你的路由配置文件中,添加mode: 'history'选项:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 其他路由配置...
];

const router = new VueRouter({
  mode: 'history', // 添加此选项
  base: process.env.BASE_URL,
  routes,
});

export default router;

这样,当你点击链接时,页面将会跳转到目标页面,但URL不会发生变化

vue框架中HTML页面跳转到另一个界面了但是URL不变比说 http127001 我请求 http127001下面的uphtml网页上的url还是 http127001结合下面的代码给我完整的具体的代码!-- eslint-disable vuemulti-word-component-names --template div div class=Polaris-Stack Pola

原文地址: https://www.cveoy.top/t/topic/insH 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录