Javascript 使用Vue和Laravel设置最早的HTML模板。正在路由器上加载JS文件。推送不起作用
我正在用Vue和Jubevel建立我的第一个每个前端网站。我在前面买了基于html/css/javascript的模板 使用laravel安装vue和vue路由器，一切似乎都正常。这里找到的是我的app.js文件Javascript 使用Vue和Laravel设置最早的HTML模板。正在路由器上加载JS文件。推送不起作用,javascript,laravel,vue.js,vue-router,Javascript,Laravel,Vue.js,Vue Router,我正在用Vue和Jubevel建立我的第一个每个前端网站。我在前面买了基于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
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')
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
this.$router.push(link);
<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>
1900+
快乐顾客
967
成功的交易
1208
获奖
导出默认值{
数据（）{
返回{
测试：“测试1”
}
},
方法：{
},
创建（）{
},
安装的（）{
},
}
<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>
我们的业务介绍
城里最好的
为什么选择我们？
在工作和工作时间内，向精英们提供最低限度的培训，包括实习
财务分析
95%
投资
80%
财务规划师
50%
业务支持
90%
见见我们
专业团队
在劳工和社会福利方面，精英的奉献是暂时的。但是，在最低限度上，我们需要一个实验室来进行日常工作
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')