I just want to try using vue.js but got into trouble when I try to use a template that I bought. I've put all the .css and .js files into index.html and then call the ponents inside vue.js itself.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports"
name="description"/>
<meta content="" name="author"/>
<title>My Application</title>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="+Sans:400,300,600,700&subset=all" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="assets/global/css/ponents-md.min.css" rel="stylesheet" id="style_ponents" type="text/css"/>
<link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="src/assets/logo.png"/>
<link rel="stylesheet" href=".1.3/sweetalert.min.css">
<!-- BEGIN CORE PLUGINS -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/pages/scripts/dashboard.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</head>
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-md">
<div class="page-wrapper">
<div id="app"></div>
<script src="/dist/build.js"></script>
</div>
</body>
</html>
All pages are running perfectly and successfully called by belongs vue.js but does not appear if I use the calling page with <router-link>
Graph.vue
<template>
<div>
<h1 class="page-title"> Grafik Pages
<small>statistics, charts, recent events and reports</small>
</h1>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Site Visits</span>
<span class="caption-helper">weekly stats...</span>
</div>
<div class="actions">
<div class="btn-group btn-group-devided" data-toggle="buttons">
<label class="btn red btn-outline btn-circle btn-sm active">
<input name="options" class="toggle" id="option1" type="radio">New</label>
<label class="btn red btn-outline btn-circle btn-sm">
<input name="options" class="toggle" id="option2" type="radio">Returning</label>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_statistics_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_statistics_content" class="display-none" style="display: block;">
<div id="site_statistics" class="chart" style="padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 10px; text-align: center;">02/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 58px; text-align: center;">03/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 107px; text-align: center;">04/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 155px; text-align: center;">05/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 203px; text-align: center;">06/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 251px; text-align: center;">07/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 300px; text-align: center;">08/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 348px; text-align: center;">09/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 396px; text-align: center;">10/2013</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 273px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 220px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 166px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div><div style="position: absolute; top: 113px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">3000</div><div style="position: absolute; top: 59px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">4000</div><div style="position: absolute; top: 6px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">5000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas></div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-share font-red-sunglo hide"></i>
<span class="caption-subject font-dark bold uppercase">Revenue</span>
<span class="caption-helper">monthly stats...</span>
</div>
<div class="actions">
<div class="btn-group">
<a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> Filter Range
<span class="fa fa-angle-down"> </span>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;"> Q1 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li>
<a href="javascript:;"> Q2 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li class="active">
<a href="javascript:;"> Q3 2014
<span class="label label-sm label-success"> current </span>
</a>
</li>
<li>
<a href="javascript:;"> Q4 2014
<span class="label label-sm label-warning"> uping </span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_activities_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_activities_content" class="display-none" style="display: block;">
<div id="site_activities" style="height: 228px; padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 21px; text-align: center;">DEC</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 66px; text-align: center;">JAN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 109px; text-align: center;">FEB</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 151px; text-align: center;">MAR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 197px; text-align: center;">APR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 239px; text-align: center;">MAY</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 285px; text-align: center;">JUN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 330px; text-align: center;">JUL</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 371px; text-align: center;">AUG</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 417px; text-align: center;">SEP</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 197px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 149px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 7px; text-align: right;">500</div><div style="position: absolute; top: 100px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 52px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1500</div><div style="position: absolute; top: 3px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas></div>
</div>
<div style="margin: 20px 0 10px 30px">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-success"> Revenue: </span>
<h3>$13,234</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-info"> Tax: </span>
<h3>$134,900</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-danger"> Shipment: </span>
<h3>$1,134</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-warning"> Orders: </span>
<h3>235090</h3>
</div>
</div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
</div>
</div>
</template>
<script>
export default {
created () {
},
methods: {
}
}
</script>
But when I refresh the page (manual), the chart data to e up with the perfect.
App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="page-container">
<leftmenu></leftmenu>
<container></container>
</div>
</div>
</template>
<script>
import Menu from './ponents/Menu.vue'
import LeftMenu from './ponents/Leftmenu.vue'
import Container from './ponents/Container.vue'
export default {
ponents: {
'navbar': Menu,
'leftmenu': LeftMenu,
'container': Container,
}
}
</script>
routes.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: "/",
ponent: require('./ponents/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/home",
ponent: require('./ponents/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/graph",
ponent: require('./ponents/pages/Graph.vue'),
meta: {
forVisitors: true
}
},
{
path: "/form",
ponent: require('./ponents/pages/Form.vue'),
meta: {
forVisitors: true
}
}
],
linkActiveClass: 'nav-item start active open',
mode: 'history'
})
export default router
What I miss??
Thanks
I just want to try using vue.js but got into trouble when I try to use a template that I bought. I've put all the .css and .js files into index.html and then call the ponents inside vue.js itself.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports"
name="description"/>
<meta content="" name="author"/>
<title>My Application</title>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis./css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="assets/global/css/ponents-md.min.css" rel="stylesheet" id="style_ponents" type="text/css"/>
<link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="src/assets/logo.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- BEGIN CORE PLUGINS -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/pages/scripts/dashboard.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</head>
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-md">
<div class="page-wrapper">
<div id="app"></div>
<script src="/dist/build.js"></script>
</div>
</body>
</html>
All pages are running perfectly and successfully called by belongs vue.js but does not appear if I use the calling page with <router-link>
Graph.vue
<template>
<div>
<h1 class="page-title"> Grafik Pages
<small>statistics, charts, recent events and reports</small>
</h1>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Site Visits</span>
<span class="caption-helper">weekly stats...</span>
</div>
<div class="actions">
<div class="btn-group btn-group-devided" data-toggle="buttons">
<label class="btn red btn-outline btn-circle btn-sm active">
<input name="options" class="toggle" id="option1" type="radio">New</label>
<label class="btn red btn-outline btn-circle btn-sm">
<input name="options" class="toggle" id="option2" type="radio">Returning</label>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_statistics_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_statistics_content" class="display-none" style="display: block;">
<div id="site_statistics" class="chart" style="padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 10px; text-align: center;">02/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 58px; text-align: center;">03/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 107px; text-align: center;">04/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 155px; text-align: center;">05/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 203px; text-align: center;">06/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 251px; text-align: center;">07/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 300px; text-align: center;">08/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 348px; text-align: center;">09/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 396px; text-align: center;">10/2013</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 273px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 220px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 166px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div><div style="position: absolute; top: 113px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">3000</div><div style="position: absolute; top: 59px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">4000</div><div style="position: absolute; top: 6px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">5000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas></div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-share font-red-sunglo hide"></i>
<span class="caption-subject font-dark bold uppercase">Revenue</span>
<span class="caption-helper">monthly stats...</span>
</div>
<div class="actions">
<div class="btn-group">
<a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> Filter Range
<span class="fa fa-angle-down"> </span>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;"> Q1 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li>
<a href="javascript:;"> Q2 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li class="active">
<a href="javascript:;"> Q3 2014
<span class="label label-sm label-success"> current </span>
</a>
</li>
<li>
<a href="javascript:;"> Q4 2014
<span class="label label-sm label-warning"> uping </span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_activities_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_activities_content" class="display-none" style="display: block;">
<div id="site_activities" style="height: 228px; padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 21px; text-align: center;">DEC</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 66px; text-align: center;">JAN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 109px; text-align: center;">FEB</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 151px; text-align: center;">MAR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 197px; text-align: center;">APR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 239px; text-align: center;">MAY</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 285px; text-align: center;">JUN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 330px; text-align: center;">JUL</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 371px; text-align: center;">AUG</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 417px; text-align: center;">SEP</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 197px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 149px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 7px; text-align: right;">500</div><div style="position: absolute; top: 100px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 52px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1500</div><div style="position: absolute; top: 3px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas></div>
</div>
<div style="margin: 20px 0 10px 30px">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-success"> Revenue: </span>
<h3>$13,234</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-info"> Tax: </span>
<h3>$134,900</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-danger"> Shipment: </span>
<h3>$1,134</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-warning"> Orders: </span>
<h3>235090</h3>
</div>
</div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
</div>
</div>
</template>
<script>
export default {
created () {
},
methods: {
}
}
</script>
But when I refresh the page (manual), the chart data to e up with the perfect.
App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="page-container">
<leftmenu></leftmenu>
<container></container>
</div>
</div>
</template>
<script>
import Menu from './ponents/Menu.vue'
import LeftMenu from './ponents/Leftmenu.vue'
import Container from './ponents/Container.vue'
export default {
ponents: {
'navbar': Menu,
'leftmenu': LeftMenu,
'container': Container,
}
}
</script>
routes.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: "/",
ponent: require('./ponents/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/home",
ponent: require('./ponents/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/graph",
ponent: require('./ponents/pages/Graph.vue'),
meta: {
forVisitors: true
}
},
{
path: "/form",
ponent: require('./ponents/pages/Form.vue'),
meta: {
forVisitors: true
}
}
],
linkActiveClass: 'nav-item start active open',
mode: 'history'
})
export default router
What I miss??
Thanks
Share Improve this question edited Mar 8, 2017 at 10:11 Bertho Joris asked Mar 8, 2017 at 9:30 Bertho JorisBertho Joris 1,6015 gold badges28 silver badges60 bronze badges 11- All bunch of code you posted is mostly useless for us.We need more VueJS related code - current one doesn't tell us anything special. – Belmin Bedak Commented Mar 8, 2017 at 9:48
- Hi @BelminBedak please check my code update – Bertho Joris Commented Mar 8, 2017 at 9:52
- Thanks this is better.Have you configured your server for history mode usage ? router.vuejs/en/essentials/history-mode.html – Belmin Bedak Commented Mar 8, 2017 at 9:59
-
Yes...My config is
mode: 'history'– Bertho Joris Commented Mar 8, 2017 at 9:59 -
I see that, my question was related to server configuration - because when you are using the HTML5 History mode your server (Apache, nginx, Node or something else) need special configuration that is pretty well described on link I posted. Also could you show us how you deal with
<router-link>Btw any console error ? – Belmin Bedak Commented Mar 8, 2017 at 10:02
1 Answer
Reset to default 3After looking at the repo, I noticed bunch of jQuery data that sometimes could mess with VueJS.
The initialization of the jQuery graph into Graph.vue ponent, should be done in some of lifecylce methods when document is ready
mounted() {
jQuery(document).ready(function() {
// chart init method
})
}
I still suggest to not mix up jQuery and Vue a lot - they are conceptually different and It just make a big mess.