Javascript Vue路由器自动在路径上添加哈希

我目前正在开发一个Vue.js web应用程序。我目前正在使用vue.js网页包模板。我已在main.js文件中将fullpage.js框架与jQuery集成，并在contactForm组件上使用fullpage.js的锚定功能。在contcatForm组件上，我使用锚来在全屏部分之间分割的表单的不同部分之间导航

问题： 完成contactForm组件的工作后，我创建了一个新组件，带有一个新路由（Gallery.vue）。每当我单击指向此组件的链接时，vue router似乎会自动添加#clientType，这是我以前contactForm组件中的一个锚。如何阻止vue router在url中的路径末尾添加3clientType

下面的文件是我安装VueRouter的地方：（router/index.js）

我的main.js文件：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import $ from "jquery"
import fullpage from 'fullpage.js'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import Carousel3d from 'vue-carousel-3d';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/css/style.css';

Vue.config.productionTip = false
Vue.use(BootstrapVue);
Vue.use(Carousel3d);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  store
})

$(document).ready(()=>{
  $('#fullpage').fullpage({
    anchors:['clientType', 'email', 'name','title','message','messageSummary'],
    keyboardScrolling:false,
    fadingEffect: true,
    scrollbar: false,
    scrollOverflow: false,
    autoScrolling:false,
  });

  $.fn.fullpage.setMouseWheelScrolling(false);
  $.fn.fullpage.setAllowScrolling(false);
});

//要使用“import”命令加载的Vue生成版本
//（仅限运行时或单机版）已在webpack.base.conf中使用别名设置。
从“Vue”导入Vue
从“./App”导入应用程序
从“jquery”导入$
从“fullpage.js”导入完整页面
从“./路由器”导入路由器
从“./store”导入存储
从“引导vue”导入引导vue
从“vue-carousel-3d”导入旋转木马；
导入“bootstrap/dist/css/bootstrap.css”
导入“bootstrap vue/dist/bootstrap vue.css”
导入“/assets/css/style.css”；
Vue.config.productionTip=false
Vue.use（BootstrapVue）；
Vue.使用（旋转木马3d）；
/*eslint禁用无新*/
新Vue({
el:“#应用程序”，
组件：{App}，
模板：'




{{clientMsg}}

个人？
公司？
您的电子邮件：
{{email}}

姓名：
{{name}}

电文标题：
{{messageTitle}}

{{message}}

从“fullpage.js”导入完整页面
从“jquery”导入$
/** 
确保你可以发送电子邮件
将jQuery动画替换为anime.js或其他动画方式。
摘要部分没有以前的按钮。
*/
导出默认值{
数据（）{
返回{
“clientMsg”：此.$store.state.contact.TypeOfClientMsg，
“名称”：“，
“电子邮件”：“，
“messageTitle”：“，
“电文”：“，
“emailValidation”：“^（[a-zA-Z0-9\-\.]+）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.\”）（[a-zA-Z0-9\-]+）（[a-zA-Z]{2,4}.[0-9]{1,3}.$”），”，
“文本验证”：“[a-zA-Z]+”，
“部分链接”：{
“clientLink”：“#clientType”，
“电子邮件链接”：“电子邮件”，
“名称链接”：“名称”，
“标题链接”：“标题”，
“msgLink”：“消息”，
“msgSummaryLink”：“#消息摘要”
},
“以前的链接”：[
{
“链接”：“客户端类型”，
“名称”：“客户”
},
{
“链接”：“电子邮件”，
“名称”：“电子邮件”
},
{
“链接”：“名称”，
“名称”：“名称”
},
{
“链接”：“标题”，
“姓名”：“职务”
},
{
“链接”：“#消息”，
“名称”：“消息”
}
],
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import $ from "jquery"
import fullpage from 'fullpage.js'
import router from './router'
import store from './store'
import BootstrapVue from 'bootstrap-vue'
import Carousel3d from 'vue-carousel-3d';
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import './assets/css/style.css';

Vue.config.productionTip = false
Vue.use(BootstrapVue);
Vue.use(Carousel3d);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router,
  store
})

$(document).ready(()=>{
  $('#fullpage').fullpage({
    anchors:['clientType', 'email', 'name','title','message','messageSummary'],
    keyboardScrolling:false,
    fadingEffect: true,
    scrollbar: false,
    scrollOverflow: false,
    autoScrolling:false,
  });

  $.fn.fullpage.setMouseWheelScrolling(false);
  $.fn.fullpage.setAllowScrolling(false);
});

<template>
    <main id="fullpage">
        <b-form @submit.prevent="validateForm($event)" id="contactForm" autocomplete="off" 
        method="post">
            <section class="section contactForm">   
                <b-form-row>
                    <h1>{{clientMsg}}</h1>
                </b-form-row>
                <b-form-row>
                    <b-col>
                        <input type="radio" name="client" value="individual" @click="IndvClient"> <label for="individual">an individual?</label>
                    </b-col>
                    <b-col>
                        <input type="radio" name="client" value="company" @click="CorporateClient" > <label for="company">a company?</label>
                    </b-col>
                    <b-col cols="12">
                        <a class="steps text-right next" :href="sectionLinks.emailLink">Next</a>
                    </b-col>
                </b-form-row>
            </section>
            <section class="section contactForm">
                <b-row no-gutters>      
                    <b-col>
                        <input type="email" id="usrEmail" placeholder="Email address..." class="text-center" 
                        :pattern="emailValidation" required v-model="email" @mouseout="isValidEmail($event)" autocomplete="off">
                    </b-col>
                </b-row>
                <b-row no-gutters>
                    <b-col cols="6">
                        <a href="#clientType" class="steps text-left">Previous</a>
                    </b-col>
                    <b-col cols="6">
                        <a class="steps text-right next" :href="sectionLinks.nameLink">Next</a>
                    </b-col>
                </b-row>
            </section>
            <section class="section contactForm">
                    <input type="text" name="usrName" id="usrName" placeholder="Name..." class="text-center"
                    required :pattern="textValidation" v-model="name" @mouseout="isValidName($event)" autocomplete="off">
                    <b-row no-gutters>
                        <b-col cols="6">
                            <a href="#email" class="steps text-left">Previous</a>
                        </b-col>
                        <b-col cols="6">
                            <a class="steps text-right next" :href="sectionLinks.titleLink">Next</a>
                        </b-col>
                    </b-row>
            </section>
            <section class="section contactForm">
                    <input type="text" name="msgTitle" id="msgTitle" placeholder="Title of the message..." 
                    class="text-center" v-model="messageTitle" required :pattern="textValidation"
                    @mouseout="isValidTitle($event)" autocomplete="off">
                    <b-row no-gutters>
                        <b-col cols="6">
                            <a href="#name" class="steps text-left">Previous</a>
                        </b-col>
                        <b-col cols="6">
                            <a class="steps text-right next" :href="sectionLinks.msgLink" >Next</a>
                        </b-col>
                    </b-row>
            </section>
            <section class="section contactForm">
                <b-row no-gutters>
                    <b-col cols="12">
                        <textarea name="" id="msgContent" cols="100" rows="7" 
                        placeholder="Message..." v-model="message" required 
                        @mouseout="isValidMsg($event)"></textarea>
                    </b-col>
                </b-row>
                <b-row no-gutters>
                    <b-col cols="6">
                        <a href="#title" class="steps text-left">Previous</a>
                    </b-col>
                    <b-col cols="6">
                        <a class="steps text-right next" :href="sectionLinks.msgSummaryLink">Next</a>
                    </b-col>
                </b-row>  
            </section>
            <section class="section contactForm formSummary">
                    <ul class="prevFormLinks">
                        <li v-for="section in previousLinks">
                            <a :href="section.link">{{section.name}}</a>
                        </li>
                    </ul>
                    <b-form-row>
                        <p>{{clientMsg}}</p>
                    </b-form-row>
                    <b-form-row>
                        <b-col>
                            <input type="radio" name="userClient" value="individual"> <label for="individual">an individual?</label>
                        </b-col>
                        <b-col>
                            <input type="radio" name="userClient" value="company"> <label for="company">a company?</label>
                        </b-col>
                    </b-form-row>
                    <b-form-row>
                        <b-col>
                            <h2>Your email:</h2>
                        </b-col>
                        <b-col>
                            <p>{{email}}</p>
                        </b-col>
                    </b-form-row>
                    <b-form-row>
                        <b-col>
                            <h2>Name:</h2>
                        </b-col>
                        <b-col>
                            <p>{{name}}</p>
                        </b-col>
                    </b-form-row>
                    <b-form-row>
                        <b-col>
                            <h4>Title of the message:</h4>
                        </b-col>
                        <b-col>      
                            <p>{{messageTitle}}</p>
                        </b-col>
                    </b-form-row>
                    <b-form-row>
                        <b-col cols="5" id="msgSummary">
                            <p>{{message}}</p>
                        </b-col>
                    </b-form-row>
                    <b-form-row>
                        <b-col cols="12">
                            <input type="submit" value="Submit!">
                        </b-col>
                    </b-form-row>
            </section>
        </b-form>  
    </main>
</template>
<script>
import fullpage from 'fullpage.js'
import $ from "jquery"
/** 
    Make sure you can then send an email
    Replace the jQuery animations with anime.js or another way of animating.
    There are no previous buttons for the summary section.
    */
    export default {
        data(){
            return {
                "clientMsg":this.$store.state.contact.TypeOfClientMsg,
                "name":"",
                "email":"",
                "messageTitle":"",
                "message":"",
                "emailValidation":'^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$',
                "textValidation":"[a-zA-Z ]+",
                "sectionLinks":{
                    "clientLink":"#clientType",
                    "emailLink":"#email",
                    "nameLink": "#name",
                    "titleLink":"#title",
                    "msgLink":"#message",
                    "msgSummaryLink":"#messageSummary"
                },
                "previousLinks":[
                    {
                        "link":"#clientType",
                        "name":"Client"
                    },
                    {
                        "link":"#email",
                        "name":"Email"
                    },
                    {
                        "link":"#name",
                        "name":"Name"
                    },
                    {
                        "link":"#title",
                        "name":"Title"
                    },
                    {
                        "link":"#message",
                        "name":"Message"
                    }
                ],
                "companyEmail":"salay777@hotmail.co.uk"
            }
        },
        methods:{
            IndvClient:function(){
                    let ind = document.querySelectorAll('input[value="individual"]');
                    let company = document.querySelectorAll('input[value="company"]'),
                    goToEmail = document.querySelector('a[href="#email"]');
                    (ind[0].checked == true)? ind[1].checked = true : ind[1].checked = false;
                    $(goToEmail).fadeIn();
            },
            CorporateClient:function(){
                    let ind = document.querySelectorAll('input[value="individual"]');
                    let company = document.querySelectorAll('input[value="company"]'),
                    goToEmail = document.querySelector('a[href="#email"]');
                    (company[0].checked == true)? company[1].checked = true : company[1].checked = false;
                    $(goToEmail).fadeIn();
            },
            isValidEmail:function(e){
                let goToName = document.querySelector('a[href="#name"]');
                (e.target.checkValidity())? $(goToName).fadeIn() : $(goToName).fadeOut();
            },
            isValidName:function(e){
               let goToTitle = document.querySelector('a[href="#title"]');
               (e.target.checkValidity())? $(goToTitle).fadeIn() : $(goToTitle).fadeOut();
            },
            isValidTitle:function(e){
                let goToMsg = document.querySelector('a[href="#message"]');
                (e.target.checkValidity())? $(goToMsg).fadeIn() : $(goToMsg).fadeOut();
            },
            isValidMsg:function(e){
                let goToSummary = document.querySelector('a[href="#messageSummary"]');
                (e.target.checkValidity())? $(goToSummary).fadeIn() : $(goToSummary).fadeOut();
            },
            validateForm:function(e){
                let idvClient = document.querySelector('input[value="individual"]'),
                corporateClient = document.querySelector('input[value="company"]'),
                usrEmail = document.getElementById('usrEmail'), usrName = document.
                getElementById('usrName'), msgTitle = document.getElementById('msgTitle'),
                msgContent = document.getElementById('msgContent'), 
                socket = io.connect('http://localhost:5000/');


                if(idvClient.checked !== corporateClient.checked){
                    console.log('client has been checked');
                    if(usrEmail.checkValidity() == false || usrName.checkValidity() == false ||
                        msgTitle.checkValidity() == false || msgContent.checkValidity() == false){
                            e.preventDefault();
                        } else {
                            let email = {
                                    client :"",
                                    email: this.email,
                                    name: this.name,
                                    title: this.messageTitle,
                                    message: this.message
                            };
                            if(idvClient.checked){
                                email.client = "[IDV]";
                            }
                            if(corporateClient.checked){
                                email.client = "[CO]";
                            }

                            socket.emit('email',email);
                            alert('submitted!');
                        }
                } else {
                    console.log('you need to select a client type');
                    e.preventDefault();
                }

                socket.on('invalidData', ()=>{
                    console.log('not today!');
                    e.preventDefault();
                });
            }
        },
        mounted(){
                let idvClient = document.querySelector('input[value="individual"]'),
                corporateClient = document.querySelector('input[value="company"]'),
                goToEmail = document.querySelector('a[href="#email"]'), form =
                document.querySelector('form');

                form.setAttribute('autocomplete', 'off');

                if(idvClient.checked == corporateClient.checked){
                    goToEmail.style.display = 'none';
                }
        }
    };
</script>
<style>

html body #fullpage {
    background-color:#383838 !important; 
    background-image: none !important;
}

html, body,#fullpage {
    overflow: hidden !important;
}
 .fp-tableCell{
  text-align:center;
  display:flex;
  justify-content: center; 
  align-items: center;
  flex-direction: column;

}

 .contactDetails .row {
   margin:0px;
 }

.contactForm .form-row {
  min-width:500px;
  justify-content:center;
}

.contactForm .form-row a, .contactForm .row a {
    margin: 60px;
    text-decoration: none;
    color: #f4f4f4;
    font-size: 36px;
    font-weight: 100;
    transition: color .5s, font-size .2s;
}

.contactForm .form-row a:hover, .contactForm .row a:hover {
    color:orange;
    font-size:40px;
}

button {
    margin-top:20px;
}

h1, h2, h3 , h4 {
    font-weight:100;
}

.next {
    display: none;
}

#msgSummary {
    word-wrap: break-word;
    text-align:left;
}

.formSummary, .formSummary h2 , .formSummary h4, 
.formSummary p {
    text-align:left !important;
}

.prevFormLinks {
    position:absolute;
    left:30px;
    text-align:left;
    margin:0px !important;
    padding:0px;
    color:white !important;
}

.prevFormLinks a {
    font-size:20px !important;
    margin:0px!important;
    padding: 0px !important;
    text-decoration: none;
    color: white !important;
    font-weight:100;
    transition: font-size .25s, color 2s;
}

.prevFormLinks a:hover {
    font-size: 25px !important;
    color: orange !important;
}
</style>

<template>
    <main id="fullpage">
        <section class="section">
            <carousel-3d>
                <slide></slide>
            </carousel-3d>
        </section>
    </main>
</template>
<script>

/**
 * add the html for the 3d slider
 * import the component
 * make the dimentions portrait
 * try import the images, loop through them and display them with a huge column width
 * make the overflow scroll
 * add some type of lightbox plugin
 */

import { Carousel3d, Slide } from 'vue-carousel-3d'

export default {
    components:{
        Carousel3d,
        Slide
    }

}
</script>
<style>

</style>