Vue Js Режим истории не удаляет # при использовании # идентификаторов в ссылках меню - PullRequest
Новая
       10

Vue Js Режим истории не удаляет # при использовании # идентификаторов в ссылках меню

0 голосов
/ 13 марта 2020

Я собираю SPA, используя Vue с VueRouter. Сайт работает, и я могу нажать на ссылку и перейти к пунктам меню. В URL я вижу, что знак # все еще предшествует имени ссылки. Например, если в меню щелкнуть «Службы», в URL-адресе будет указано: https://sitename.com/#services Я использую режим: «история», который должен позаботиться об этом, но я полагаю, что что-то упустил. Если кто-нибудь сможет просмотреть мой код и помочь мне с этим, я буду признателен за это. Спасибо.

В моем каталоге root у меня есть маршрутизатор. js

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

function load(componentName) {
    return () => import(`@/components/${componentName}`);
}

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'Home',
            component: load('Home')
        }
        ,
        {
            path: '/services',
            name: 'Services',
            component: load('Services')
        },
        {
            path: '/portfolio',
            name: 'Portfolio',
            component: load('Portfolio')
        },
        {
            path: '/about',
            name: 'About',
            component: load('About')
        },
        {
            path: '/team',
            name: 'Team',
            component: load('Team')
        },
        {
            path: '/contact',
            name: 'Contact',
            component: load('Contact')
        },
        {
            path: '/privacy',
            name: 'Privacy',
            component: load('Privacy')
        },
        {
            path: '/success',
            name: 'Success',
            component: load('Success')
        }
    ]
});

export default router;

в моем исходном каталоге и внутри компонентов, у меня есть компонент Nav. vue Вы можете видеть, что я использую условное выражение, которое говорит, что индекс 0 равен # et c. Я думал, что это должно устранить ха sh, но это не так.

Nav. vue

<template>
  <div>
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
      <div class="container">
        <a class="navbar-brand js-scroll-trigger" href="/">
          <span class="first-r">R</span>
          <span class="second-r">R</span>
          <span class="spark">Spark</span>
        </a>
        <button
          class="navbar-toggler navbar-toggler-right"
          type="button"
          data-toggle="collapse"
          data-target="#navbarResponsive"
          aria-controls="navbarResponsive"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          Menu
          <i class="fas fa-bars"></i>
        </button>
        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav text-uppercase ml-auto">
            <li class="nav-item" v-for="(linkObj, ind) in navList" :key="ind">
              <a
                class="nav-link js-scroll-trigger"
                :href="linkObj.path"
                v-if="linkObj.path.indexOf('#') === 0"
              >{{linkObj.name}}</a>
              <router-link
                class="nav-link"
                js-scroll-trigger
                v-else
                :to="linkObj.path"
              >{{linkObj.name }}</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </div>
</template>
<script>
export default {
  data: () => ({
    navList: [
      {
        name: "Services",
        path: "#services"
      },
      {
        name: "Portfolio",
        path: "#portfolio"
      },
      {
        name: "About",
        path: "#about"
      },
      {
        name: "Team",
        path: "#team"
      },
      {
        name: "Contact",
        path: "#contact"
      }
    ]
  })
};
</script>
<style lang="">
</style>

в SR C в моем приложении. vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

main. js

import Vue from 'vue';
import App from './App.vue';
import router from '../router';
import VueResource from "vue-resource"
import './assets/css/style.css'
import './assets/vendor/bootstrap/css/bootstrap.min.css';
import './assets/vendor/fontawesome-free/css/all.min.css';


Vue.config.productionTip = false
Vue.use(VueResource);


new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

Ради космоса я покажу только минимум Дома. vue компонент 

<template>
  <div>
    <Nav></Nav>
    <div>
      <header class="masthead">
        <div class="container">
          <div class="masthead-holder">
            <img src="../assets/img/RRLogo2.png" class="mt-5 logo" alt />
            <div class="intro-text">
              <div class="intro-lead-in">Welcome RR Spark Web Studio!</div>
              <div class="intro-heading text-uppercase">Hire Us For Your Next Web Project</div>
              <a
                class="btn tell-me btn-xl text-uppercase js-scroll-trigger"
                href="#services"
              >Tell Me More</a>
            </div>
          </div>
        </div>
      </header>
    </div>

    <div>
      <section class="page-section" id="services">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 text-center">
              <h2 class="section-heading text-uppercase">Services</h2>
              <h3 class="section-subheading text-muted">Delivering your ideal website is what we do. 
              </h3>
            </div>
          </div>
          <div class="row text-center">
            <div class="col-md-4">
              <span class="fa-stack fa-4x">
                <i class="fas fa-circle fa-stack-2x icon-color"></i>
                <i class="fas fa-paint-brush fa-stack-1x fa-inverse"></i>
              </span>
              <h4 class="service-heading">Web Design</h4>
              <p
                class="text-muted text-justify"
              >We take the time to really know your company to get a better understanding of your goals, vision and where you want to go in order to create that perfect, unique website that will help you reach your specific target audience. Your site needs to be user friendly, functional and visually pleasing and that is where are designer comes in to ensure the design is exactly what you want.</p>
            </div>
            <div class="col-md-4">
              <span class="fa-stack fa-4x">
                <i class="fas fa-circle fa-stack-2x icon-color"></i>
                <i class="fas fa-globe fa-stack-1x fa-inverse"></i>
              </span>
              <h4 class="service-heading">Web Development</h4>
              <p
                class="text-muted text-justify"
              >Working hand in hand with our designer, we use the latest in web technology, such as HTML; CSS3; JavaScript, to bring you a site that is fast, SEO (Search Engine Optimization) friendly as well as highly responsive. Keeping up with the latest Standards from W3C, your project will be built for a superior user experience on mobile, tablet as well as PC.</p>
            </div>
            <div class="col-md-4">
              <span class="fa-stack fa-4x">
                <i class="fas fa-circle fa-stack-2x icon-color"></i>
                <i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
              </span>
              <h4 class="service-heading">Content Management</h4>
              <p
                class="text-muted text-justify"
              >Keeping up with changes on your site in this fast-paced world means that your site will constantly need new and fresh content. Using a content management system (CMS), such as WordPress allows you, the user, the ability to quickly add new content whenever you wish, maintain and implement marketing campaigns and monitor analytics all from within the user dashboard. We provide either WordPress modifications or Custom theming solutions.</p>
            </div>
          </div>
          <div class="row mt-5">
            <div class="col-lg-12 text-center">
              <h2 class="section-heading text-uppercase">Ready? So Are We</h2>
              <div class="row">
                <div class="col-lg-6 p-5">
                  <h3
                    class="section-subheading text-muted mb-4"
                  >For a no-obligation quote, click the button below and tell us all about your project.</h3>
                  <a
                    class="btn tell-me btn-xl mt-0 mb-4 text-uppercase js-scroll-trigger"
                    href="#contact"
                  >CLICK ME</a>
                </div>
                <div class="col-lg-6 p-5">
                  <h3
                    class="section-subheading text-muted mb-4"
                  >If you don't like contact forms, ask us a question via WhatsApp using the button below.</h3>
                  <a
                    class="btn tell-me btn-xl mt-0 text-uppercase js-scroll-trigger"
                    href="https://api.whatsapp.com/send?phone=525517043338"
                    target="_blank"
                  >WhatsApp</a>
                </div>
              </div>
              <!--end row CTA-->
            </div>
          </div>
        </div>
      </section>
    </div>

<!--other sections-->



<div>
      <section class="page-section" id="contact">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 text-center">
              <h2 class="section-heading text-uppercase">Contact Us</h2>
              <h3
                class="section-subheading text-white"
              >We are ready to get your project up and live.</h3>
            </div>
          </div>

          <div class="row">
            <div class="col-lg-12">
              <Contact></Contact>
            </div>
          </div>
        </div>
      </section>
    </div>

    <Footer></Footer>
  </div>
</template>
<script>
import Nav from "./Nav";
import Footer from "./Footer";
import Contact from "./Contact";
export default {
  name: "App",
  components: {
    Nav,
    Contact,
    Footer
  },
  data: () => ({
    portfolioJSON: [
      {
        linkToModal: "#portfolioModal1",
        image: require("../assets/img/portfolio/icoimanismall.jpg"),
        header: "Imani Luz Y Harmonía",
        caption: "Graphic Design"
      },
      {
        linkToModal: "#portfolioModal2",
        image: require("../assets/img/portfolio/icopsicliliansmall.jpg"),
        header: "Transformando Vidas",
        caption: "Web Development"
      },
      {
        linkToModal: "#portfolioModal3",
        image: require("../assets/img/portfolio/icopsicovintsmall.jpg"),
        header: "Viaje a tu Interior",
        caption: "Web Development"
      },
      {
        linkToModal: "#portfolioModal4",
        image: require("../assets/img/portfolio/algovisolutionsthumb.png"),
        header: "Algovi Solutions Landing Page",
        caption: "Web Development"
      },
      {
        linkToModal: "#portfolioModal5",
        image: require("../assets/img/portfolio/naplesdentalthumb.png"),
        header: "Naples Dental Clinic",
        caption: "Web Development"
      },
      {
        linkToModal: "#portfolioModal6",
        image: require("../assets/img/portfolio/xploreflythumb.png"),
        header: "Xplorefly Travel Agency",
        caption: "Web Development"
      }
    ]
  })
};
</script>
<style lang="">
</style>

Опять же, спасибо, что посмотрели на это, поскольку я новичок в VueJS и обучение.

Ответы [ 2 ]

2 голосов
/ 13 марта 2020

В Nav.vue ваш navList массив, содержащий пути, имеет #. Пути должны быть идентичны пути, который вы определили в router.js. Попробуйте изменить массив

с: 

navList: [
      {
        name: "Services",
        path: "#services"
      },
      {
        name: "Portfolio",
        path: "#portfolio"
      },
      {
        name: "About",
        path: "#about"
      },
      {
        name: "Team",
        path: "#team"
      },
      {
        name: "Contact",
        path: "#contact"
      }
    ]

на 

navList: [
      {
        name: "Services",
        path: "/services"
      },
      {
        name: "Portfolio",
        path: "/portfolio"
      },
      {
        name: "About",
        path: "/about"
      },
      {
        name: "Team",
        path: "/team"
      },
      {
        name: "Contact",
        path: "/contact"
      }
    ]

, если вы не можете изменить массив, попробуйте изменить строку следующим образом: 

<router-link :to="linkObj.path.replace('#','/')">{{ linkObj.name }}</router-link>

Заключение

Для маршрутизации Навигация для рендеринга других компонентов в теге <router-view />, попробуйте использовать эксклюзивный тег <router-link to="/path">. Тег <a href="/path"> также будет перемещаться по вам, но это перезагрузит страницу.

Если вы хотите перейти к якорям на своей странице, вы все равно можете использовать <a href="#anchorId">

1 голос
/ 13 марта 2020

это твой тэг содержит тэг # в href = "#".

это не часть VueRouter, тебе нужно удалить его и сделать новую функцию для прокрутки до указанной c области или деления.

допустим, скажем: 

<a class="btn tell-me btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>

Вам необходимо убрать '#' внутри 'href', затем добавить @ click = "goToSection ('yourAreaWantToJump')", затем необходимо добавить скроллер для указания c дел. в этом случае вам нужно перейти к разделу «услуги»

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...