VueJs : Javascripts ne se rechargent pas lorsque je change de page
Alex Salicki
Bonjour à tous ;)
Je suis débutant en Code et Javascript et j'ai décidé de créer mon portfolio avec VueJS en SPA grâce à un tutoriel . J'ai intégré un slider sur ma Homepage plutot sympatique que j'ai trouvé sur Codrops : https://tympanus.net/Development/SliceRevealer/index2.html
Mon App se lance bien et mon Slider fonctionne parfaitement , les scripts javascripts se lancent bien lorsque je reste sur ma HomePage.
Mon problème
Lorsque je change de page (pour aller sur About.vue) avec le "router-view" et que je reviens ma Homepage , le slider ne s'anime plus du tout et ne fonctionne plus ( je ne peux plus changer également les slides ). On dirait que lorsque je change de page et que je reviens sur celle ci , les scripts javascripts ne se rechargent pas et je ne comprends pas pourquoi.
Je n'ai pourtant aucune erreur dans ma console .
Voici le code de mon app :
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
//import the vue instance
import Vue from 'vue'
//import the App component
import App from './App'
//import the vue router
import VueRouter from 'vue-router'
//tell vue to use the router
Vue.use(VueRouter)
/* eslint-disable no-new */
//import the hello component
import Hello from './components/Hello'
//import the about component
import About from './components/About'
//define your routes
const routes = [
//route for the home route of the webpage
{ path: '/', component: Hello },
//route for the about route of the webpage
{ path: '/about', component: About }
]
// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = new VueRouter({
routes, // short for routes: routes
mode: 'history'
})
//instatinat the vue instance
new Vue({
//define the selector for the root component
el: '#app',
//pass the template to the root component
template: '<App/>',
//declare components that the root component can access
components: { App },
//pass in the router to the vue instance
router
}).$mount('#app')//mount the router on the app
App.vue
<template>
<div id="app">
<div class="Grid">
<div class="Grid-cell u-size12 u-offset2">
<div class="Stripes-container">
<div class="Stripes-item"></div>
<div class="Stripes-item"></div>
<div class="Stripes-item"></div>
<div class="Stripes-item"></div>
<div class="Stripes-item"></div>
</div>
</div>
</div>
<nav class="demos">
<!-- the router outlet, where all matched components would ber viewed -->
<router-link v-bind:to="'/'">Home</router-link>
<router-link v-bind:to="'/About'">About</router-link>
</nav>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<!-- styling for the component -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Hello.vue
<template>
<div id="hello">
<body class="demo-2 loading">
<link rel="stylesheet" type="text/css" href="../base.css" />
<link rel="stylesheet" type="text/css" href="../uncover.css" />
<main>
<div class="content">
<div class="slides">
<div class="slide slide--current">
<div class="slide__img slide__img-size1" style="background-image: url(../static/3.jpg);"></div>
<div class='title_project'>Manners</div>
<div class="info_project">Website </div>
</div>
<div class="slide">
<div class="slide__img slide__img-size2" style="background-image: url(../static/2.jpg);"></div>
</div>
<div class="slide">
<div class="slide__img slide__img-size1" style="background-image: url(../static/3.jpg);"></div>
</div>
<div class="slide">
<div class="slide__img slide__img-size3" style="background-image: url(../static/4.jpg);"></div>
</div>
<div class="slide">
<div class="slide__img slide__img-size2" style="background-image: url(../static/5.jpg);"></div>
</div>
</div>
</div>
<div class="letter-w">W</div>
<div class="letter-o">O</div>
<div class="letter-r">R</div>
</main>
</body>
</div>
</template>
<script>
export default {
name: 'hello'
}
</script>About.vue
<template>
<div id="about">
When you have a great story about how your product or service was built to change lives, share it. The "About Us" page is a great place for it to live, too. Good stories humanize your brand, providing context and meaning for your product. What’s more, good stories are sticky -- which means people are more likely to connect with them and pass them on.
</div>
</template>
<script>
export default {
name: 'about'
}
</script>
<!-- styling for the component -->
<style>
#about {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/base.css" />
<link rel="stylesheet" type="text/css" href="/static/uncover.css" />
<title>app</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script src="/static/imagesloaded.pkgd.min.js"></script>
<script src="/static/anime.min.js"></script>
<script src="/static/uncover.js"></script>
<script src="/static/demo2.js"></script>
</html>Le code complet de mon App est diponible sur Github : https://github.com/Alexsalicki91/portfolio/tree/master/spa
Ce que j'obtiens
Mon Slider ne fonctionne plus lorsque je change de page et que je reviens à ma Homepage et je ne comprends pas pourquoi. J'ai beaucoup rechercher sur des forums mais je n'ai pas trouvé de solutions à mon problème et j'ai besoin d'aide !
Il y a t'il des erreurs dans mon code ? Ai je oublié des lignes de codes importantes ? Faut il du code en plus pour que les scripts javascripts du slider se rechargent lorsque je reviens sur ma page ? D'ou vient ce problème ?
Bonne soirée à tous :)
Alex Salicki