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

时间：2018-09-08 17:00:36

标签： javascript jquery node.js vue.js vue-router

我目前正在处理Vue.js网络应用程序。我目前正在使用vue.js Webpack模板。我已将fullpage.js框架与jQuery集成到main.js文件中，并且在我的contactForm组件上使用了fullpage.js的锚点功能。在contcatForm组件上，我使用锚来导航在全屏部分之间拆分的表单的不同部分之间。

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

以下文件是我设置VueRouter的位置：（router / index.js）

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/components/Home'
import Contact from '@/components/Contact'
import About from '@/components/About'
import ContactForm from '@/components/contactForm'
import Gallery from '@/components/Gallery'


Vue.use(VueRouter);

const routes = [
    {path:'/', name:'homepage', component: Home},
    {path:'/contact', name:'contactPage', component: Contact},
    {path:'/about', name:'aboutpage', component: About},
    {path:'/gallery', name:'gallery', component: Gallery },
    {path:'/contactForm', name:'contactForm', component: ContactForm},
];

export default new VueRouter({
    mode:'history',
    routes
});

我的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);
});

我的contactForm.vue组件：

<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>

我的Gallery.vue组件：

<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>

1 个答案:

答案 0 :(得分：0)

我发现了问题，我在整个网站上使用了一个fullpage.js实例。因此，默认情况下，如果我使用anchor属性在实例本身上定义了数据锚，它将在所有vue.components的所有部分中添加数据锚。相反，我要做的是在contactForm组件的标记上使用data-anchor属性，仅将锚应用于该组件。

相关问题
最新问题