Я создаю свой первый веб-сайт с Vue и Larvavel.Я купил шаблон на основе html / css / javascript на Themeforest.
Настройка маршрутизатора vue и vue с помощью laravel, и все, кажется, работает, вот мои файлы app.js выглядят как
require('./bootstrap');
import $ from 'jquery';
window.Vue = require('vue');
import VueRouter from 'vue-router';
import routes from './router';
import slider from "./components/slider/index.vue";
import insideheader from "./components/slider/innerheader.vue";
Vue.use(VueRouter);
import App from './components/App.vue';
Vue.component('slider', slider );
Vue.component('insideheader', insideheader );
const router = new VueRouter({
mode: 'history',
routes,
});
Vue.router = router
const app = new Vue({
el: '#app',
data: {
},
router: router,
render: t => t(App),
});
require('./js/vendor/jquery-library.js')
require('./js/vendor/jquery-2.2.4.min.js')
require('./js/vendor/bootstrap.min.js')
require('./js/owl.carousel.min.js')
require('./js/jquery.svgInject.js')
require('./js/isotope.pkgd.js')
require( './js/chartsloader.js')
require('./js/parallax.js')
require('./js/countTo.js')
window._ = require('./js/appear.js')
// require('./js/gmap3.js');
require('./js/main.js')
как выглядит мой App.vue
import Home from "./../components/home.vue";
import About from "./../components/about.vue";
const router = [
{ path: '/', component: Home, name: 'home' },
{ path: '/home', component: Home, name: 'home' },
{ path: '/about', component: About, name: 'about' },
]
export default router;
Когда я загружаю свой дом или использую прямую ссылку, такую как
http://127.0.0.1:8000/home
http://127.0.0.1:8000/about
Он работает нормально, но если я использую $ router.push для измененияurl и загрузите другой vue файл
this.$router.push(link);
Страница не отображается должным образом, либо файлы css или js не работают должным образом, но я не получаю никакой ошибки в консоли, так что не знаю, что исправить.Я предполагаю, что js файлы, потому что классы страниц загружаются правильно, это функция, основанная на jquery, кажется, не выполняет свою работу.
Буду признателен за любую помощь.
Спасибо за ваш ответ заранее.
<template>
<span>
<slider></slider>
<!--************************************
Main Start
*************************************-->
<main id="tg-main" class="tg-main tg-haslayout">
<!--************************************
Statistics Start
*************************************-->
<section class="tg-haslayout tg-parallax-window" data-appear-top-offset="600" data-parallax="scroll" data-image-src="images/parallax/bgparallax-01.jpg">
<div class="container">
<div class="row">
<div class="tg-statistics">
<div class="tg-statistic tg-goals">
<span class="icon-Icon1 tg-icon"></span>
<div class="tg-namecount">
<h2><span class="tg-statistic-count" data-from="0" data-to="1900" data-speed="8000" data-refresh-interval="50">1900+</span></h2>
<h3>Happy customers</h3>
</div>
</div>
<div class="tg-statistic tg-activeplayers">
<span class="icon-Icon2 tg-icon"></span>
<div class="tg-namecount">
<h2><span class="tg-statistic-count" data-from="0" data-to="967" data-speed="8000" data-refresh-interval="50">967</span></h2>
<h3>Successful Deals</h3>
</div>
</div>
<div class="tg-statistic tg-activeteams">
<span class="icon-Icon3 tg-icon"></span>
<div class="tg-namecount">
<h2><span class="tg-statistic-count" data-from="0" data-to="1208" data-speed="8000" data-refresh-interval="50">1208</span></h2>
<h3>awards earned</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<!--************************************
Statistics End
*************************************-->
</main>
<!--************************************
Main End
*************************************-->
</span>
</template>
<script>
export default {
data() {
return {
test: 'test1'
}
},
methods: {
},
created() {
},
mounted() {
},
}
</script>
About.vue
<template>
<div id="tg-wrapper" class="tg-wrapper tg-haslayout">
<insideheader></insideheader>
<!--************************************
Main Start
*************************************-->
<main id="tg-main" class="tg-main tg-haslayout">
<!--************************************
Video Why Choose Us? Start
*************************************-->
<section class="tg-bglight tg-haslayout">
<div class="col-sm-6">
<div class="row">
<div class="tg-videosection">
<figure>
<img src="images/img-01.jpg" alt="image description">
<figcaption>
<a class="tg-btnplay" href="#"><i class="fa fa-play"></i></a>
<h2>our business Introduction</h2>
</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="tg-whychooseus">
<div class="tg-sectionhead">
<div class="tg-sectiontitle">
<h2>best in town</h2>
<h3>why choose us?</h3>
</div>
<div class="tg-description">
<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore iqua Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
</div>
<div id="tg-ourskill" class="tg-ourskill tg-skillgroup">
<div class="tg-skill">
<h4>FINANCIAL ANALYSIS</h4>
<div class="tg-skillholder" data-percent="95%">
<div class="tg-skillbar">
<h5>95%</h5>
</div>
</div>
</div>
<div class="tg-skill tg-active">
<h4>INVESTMENTS</h4>
<div class="tg-skillholder" data-percent="80%">
<div class="tg-skillbar">
<h5>80%</h5>
</div>
</div>
</div>
<div class="tg-skill">
<h4>FINANCIAL PLANNER</h4>
<div class="tg-skillholder" data-percent="50%">
<div class="tg-skillbar">
<h5>50%</h5>
</div>
</div>
</div>
<div class="tg-skill">
<h4>BUSINESS SUPPORT</h4>
<div class="tg-skillholder" data-percent="90%">
<div class="tg-skillbar">
<h5>90%</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--************************************
Video Why Choose Us? End
*************************************-->
<!--************************************
Perfessional Team Start
*************************************-->
<section class="tg-main-section tg-haslayout">
<div class="container">
<div class="row">
<div class="col-lg-offset-2 col-lg-8 col-md-offset-1 col-md-10 col-sm-offset-0 col-sm-12 col-xs-12">
<div class="tg-sectionhead">
<div class="tg-sectiontitle">
<h2>Meet our</h2>
<h3>Professional Team</h3>
</div>
<div class="tg-description">
<p>Consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div id="tg-teamslider" class="tg-teamslider tg-teammembers">
<div class="item tg-member">
<figure>
<img src="images/team/img-01.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Dwight Billick</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-02.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Leonia Murch</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-03.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Milford Mcwilliam</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-04.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Jessenia Ly</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-01.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Dwight Billick</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-02.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Leonia Murch</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-01.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Dwight Billick</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-02.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Leonia Murch</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-03.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Milford Mcwilliam</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
<div class="item tg-member">
<figure>
<img src="images/team/img-04.jpg" alt="image description">
<figcaption>
<ul class="tg-socialprofilelinks">
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
</ul>
</figcaption>
</figure>
<div class="tg-memberinfo">
<div class="tg-membername">
<h4><a href="#">Jessenia Ly</a></h4>
</div>
<div class="tg-memberdesignation">
<span><a href="#">Financial Planner</a></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--************************************
Perfessional Team End
*************************************-->
</main>
<!--************************************
Main End
*************************************-->
</div>
</template>
<script>
export default {
data() {
return {
test: 'test2'
}
},
methods: {
autoComplete(){
alert('hit');
}
},
created() {
},
mounted() {
// this.$root.$on('UpdateWaiting', this.waitingapproval)
},
}
</script>