vue框架中HTML页面跳转到另一个界面了但是URL不变比说我主页是httplocalhost8080 我请求httplocalhost8080help网页上的url显示的还是httplocalhost8080结合下面的代码给我完整的具体的代码!-- eslint-disable vuemulti-word-component-names --template div div clas
在上面的代码中,你可以使用<router-link>标签来实现在Vue框架中的页面跳转,同时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>
请注意,我将原来的<a>标签替换为了<router-link>标签,并在其中使用了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不会改变
原文地址: https://www.cveoy.top/t/topic/insV 著作权归作者所有。请勿转载和采集!