我正在用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更改网址并加载另一个vue文件
this.$router.push(link);
页面无法正常显示，或者css或js文件无法正常运行，但是我在控制台中未看到任何关于此的错误，因此不确定如何解决。我的猜测是js文件的coz页面类正在正确加载，这是基于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>
答案 0 :(得分：1)
这是由于jQuery无法加载...
您知道vue路由器不会重新加载页面，但会更改浏览器中的URL并更新虚拟DOM。在这种情况下，将更新DOM，但不调用jQuery。
我在Vue方面不是很熟练，但是我认为您应该在组件中移动以下语句，然后在家中和组件之间或在这些组件的安装函数中调用它。
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')