vue路由器未正确显示vue组件

时间：2020-01-24 13:37:35

标签： vue.js webpack vue-router

我正在构建一个vue Webpack项目.Home.vue组件是vue-router加载的默认组件，如下图所示： enter image description here

问题在于，当我单击另一个选项卡以正确加载ex：AboutUs.vue的另一个组件时，但是当我单击“主页”选项卡以再次显示Home.vue组件时，它却无法正确加载，如下所示图片： enter image description here

main.js 

import Vue from 'vue';
import App from './App.vue';
import Header from './Header.vue';
import Home from './Home.vue';
import Footer from './Footer.vue';
import AboutUs from './AboutUs.vue';

import VueRouter from "vue-router";

Vue.component('app-header',Header);
Vue.component('app-footer',Footer);


Vue.use(VueRouter);

const router = new VueRouter({

    base: '/',

    routes:[
        { 
            path:'/',component:Home
        },
        { 
            path:'/about-us',component:AboutUs
        }   

    ]/*,

    mode:'history'*/

});

new Vue({
  router,   
  el: '#app',
  render: h => h(App)
});

App.vue 

<template>
  <div id="app">
    <div class="page">

      <app-header></app-header>
      <router-view></router-view>

      <app-footer></app-footer>

      <VueInjectJs src="src/assets/js/js.cookie.min.js" />

      <VueInjectJs src="src/assets/js/current-device.min.js" />

      <VueInjectJs src="src/assets/js/jquery.ba-resize.min.js" />

      <VueInjectJs src="src/assets/js/jquery.easing.1.3.js" />
      <VueInjectJs src="src/assets/js/jquery.touchSwipe.min.js" />

      <VueInjectJs src="src/assets/js/popper.min.js" />

      <VueInjectJs src="src/assets/js/Regula.min.js" />

      <VueInjectJs src="src/assets/js/jquery.form.min.js" />

      <VueInjectJs src="src/assets/js/RDInputLabel.min.js" />

      <VueInjectJs src="src/assets/js/RDFilePicker.min.js" />

      <VueInjectJs src="src/assets/js/Owlcarousel.min.js" />

      <VueInjectJs src="src/assets/js/isotope.pkgd.min.js" />

      <VueInjectJs src="src/assets/js/RDNavbar.min.js" />

      <VueInjectJs src="src/assets/js/jquery.ui.totop.min.js" />

      <VueInjectJs src="src/assets/js/MaterianizeParallax.min.js" />

      <VueInjectJs src="src/assets/js/swiper.min.js" />

      <VueInjectJs src="src/assets/js/lightgallery.min.js" />

      <VueInjectJs src="src/assets/js/wow.min.js" />

      <VueInjectJs src="src/assets/js/PageTransition.min.js" />

      <VueInjectJs src="src/assets/js/Select2.min.js" />

      <VueInjectJs src="src/assets/js/slick.min.js" />

      <VueInjectJs src="src/assets/js/Stepper.min.js" />

      <VueInjectJs src="src/assets/js/CustomEventpolyfill.min.js" />

      <VueInjectJs src="src/assets/js/MultiToggles.min.js" />

      <VueInjectJs src="src/assets/js/RDRange.min.js" />

      <VueInjectJs src="src/assets/js/jQueryMousewheel.min.js" />

      <VueInjectJs src="src/assets/js/jQueryMousewheel2.min.js" />

      <VueInjectJs src="src/assets/js/αUtil.min.js" />

      <VueInjectJs src="src/assets/js/αCounter.min.js" />

      <VueInjectJs src="src/assets/js/αProgressCircle.min.js" />

      <VueInjectJs src="src/assets/js/αCountdown.min.js" /> 

      <VueInjectJs src="src/assets/js/script.js" />

    </div>  

  </div>
</template>

<script>

import JQuery from 'jquery'


import JQueryMigrate from 'jquery-migrate'

window.jQuery = JQuery

import bootstrap from 'bootstrap'

import VueInjectJs from 'vue-inject-js'

export default {
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  name: 'app',
  components: {
    VueInjectJs
  }
}
</script>

<style>
  @import '//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900%7CRoboto:300,400,500,700,900';

   @import './assets/css/bootstrap.css';
   /*@import '~boostrap';*/
   /*@import './bootstrap/dist/bootstrap.min.css';*/

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

Home.vue 

<template>
    <div><!-- Root -->
      <div id="app">
      <section class="section section-lg bg-gray-12">
        <div class="container">
          <h2 class="heading-decoration-1"><span class="heading-inner">What People Say </span>
            </h2>
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-carousel-spacing mt-35 mt-lg-60" data-items="1" data-md-items="2" data-lg-items="3" data-dots="true" data-nav="false" data-stage-padding="0" data-loop="true" data-margin="30" data-mouse-drag="true" data-autoplay="true" data-autoplay-speed="3500" >
            <!-- <global-testimonial></global-testimonial> -->  
            <blockquote class="quote-light">
              <div class="quote-light-header"><img class="quote-light-avatar" src="./assets/images/testimonials-2-57x57.jpg" alt="" width="57" height="57"/>
                <div class="quote-light-meta">
                  <h4 class="quote-light-cite">Walter Williams</h4>
                  <p class="quote-light-position">Lifeguard</p>
                </div>
              </div>
              <div class="quote-light-main">
                <p>We recently rented an apartment through your site, and have been looked after by James Thompson. He provided us with utmost support on every property issue.</p>
              </div>
            </blockquote>

            <blockquote class="quote-light">
              <div class="quote-light-header"><img class="quote-light-avatar" src="src/assets/images/testimonials-3-57x57.jpg" alt="" width="57" height="57"/>
                <div class="quote-light-meta">
                  <h4 class="quote-light-cite">Kate Anderson</h4>
                  <p class="quote-light-position">Decorator</p>
                </div>
              </div>
              <div class="quote-light-main">
                <p>I have always found your team to be extremely prompt and professional with all dealings I have had with them. You always keep me updated on the progress.</p>
              </div>
            </blockquote>
            <blockquote class="quote-light">
              <div class="quote-light-header"><img class="quote-light-avatar" src="src/assets/images/testimonials-4-57x57.jpg" alt="" width="57" height="57"/>
                <div class="quote-light-meta">
                  <h4 class="quote-light-cite">Peter Smith</h4>
                  <p class="quote-light-position">Historian</p>
                </div>
              </div>
              <div class="quote-light-main">
                <p>Your advice and support from our initial meeting through liaising with current tenants and a polished marketing program all contributed to a great sale process.</p>
              </div>
            </blockquote>
            <blockquote class="quote-light">
              <div class="quote-light-header"><img class="quote-light-avatar" src="src/assets/images/testimonials-5-57x57.jpg" alt="" width="57" height="57"/>
                <div class="quote-light-meta">
                  <h4 class="quote-light-cite">Alice Lewis</h4>
                  <p class="quote-light-position">Office Manager</p>
                </div>
              </div>
              <div class="quote-light-main">
                <p>You were quick to understand my needs and steer me in the right direction. The professionalism and warmth of your team made the process less stressful.</p>
              </div>
            </blockquote>
            <blockquote class="quote-light">
              <div class="quote-light-header"><img class="quote-light-avatar" src="/src/assets/images/testimonials-6-57x57.jpg" alt="" width="57" height="57"/>
                <div class="quote-light-meta">
                  <h4 class="quote-light-cite">Dennis Brooks</h4>
                  <p class="quote-light-position">Entrepreneur</p>
                </div>
              </div>
              <div class="quote-light-main">
               <p>Working with your team is a great experience. Expert guidance; great customer care; awesome marketing! Thank you for the great team effort!</p> 

              </div>
            </blockquote>

          </div>
        </div>
      </section>
 </div> <!--End Vue Js APP


     <!-- Clients-->
     <h2 class="heading-decoration-1"><span class="heading-inner">Our Clients </span></h2>

     <section class="section section-sm bg-default">
        <div class="container">
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-carousel-stretch" data-items="1" data-sm-items="2" data-md-items="4" data-dots="true" data-nav="false" data-stage-padding="1" data-loop="false" data-margin="30" data-autoplay="true" data-autoplay-speed="3000" data-mouse-drag="false"><a class="link-corporate" href="#"><img src="src/assets/images/brand-1-183x44.png" alt="" width="183" height="44"/></a><a class="link-corporate" href="#"><img src="src/assets/images/brand-2-118x82.png" alt="" width="118" height="82"/></a><a class="link-corporate" href="#"><img src="src/assets/images/brand-3-137x39.png" alt="" width="137" height="39"/></a><a class="link-corporate" href="#"><img src="src/assets/images/brand-4-133x77.png" alt="" width="133" height="77"/></a><a class="link-corporate" href="#"><img src="src/assets/images/brand-5-145x35.png" alt="" width="145" height="35"/></a></div>
        </div>
      </section>
      <!--End Clients-->

       <!-- Partners-->
     <h2 class="heading-decoration-1"><span class="heading-inner">Our Partners </span></h2>

     <section class="section section-sm bg-default">
        <div class="container">
          <!-- Owl Carousel-->
          <div class="owl-carousel owl-carousel-stretch" data-items="1" data-sm-items="2" data-md-items="4" data-dots="true" data-nav="false" data-stage-padding="1" data-loop="false" data-margin="30" data-autoplay="true" data-autoplay-speed="3000" data-mouse-drag="false">
            <a class="link-corporate" href="#"><img src="src/assets/images/brand-1-183x44.png" alt="" width="183" height="44"/></a>
            <a class="link-corporate" href="#"><img src="src/assets/images/brand-2-118x82.png" alt="" width="118" height="82"/></a>
            <a class="link-corporate" href="#"><img src="src/assets/images/brand-3-137x39.png" alt="" width="137" height="39"/></a>
            <a class="link-corporate" href="#"><img src="src/assets/images/brand-4-133x77.png" alt="" width="133" height="77"/></a>
            <a class="link-corporate" href="#"><img src="src/assets/images/brand-5-145x35.png" alt="" width="145" height="35"/></a>

          </div>
        </div>
      </section>
      <!--End Partners-->
    </div><!-- End Root -->

</template>

0 个答案:

没有答案
相关问题
最新问题