我正在使用 Vue 和 Larvavel 建立我的第一个前端网站。我在 Themeforest 上购买了基于 html/css/javascript 的模板。
使用 laravel 设置 vue 和 vue 路由器，一切似乎都正常工作，我的 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>
关于.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>
最佳答案
这是因为 jQuery 没有加载...
如你所知，vue router 不会重新加载页面，但会更改浏览器中的 URL 并更新虚拟 DOM。在这种情况下，DOM 会更新，但不会调用 jQuery。
我不是 vue 专家，但我认为您应该将以下语句移动到组件中并在 home 和 about 组件中调用它，或者在这些组件的挂载函数中调用它。
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')
关于javascript - 使用 Vue 和 Laravel 设置 Themeforest HTML 模板。在 router.push 上加载 JS 文件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52233319/