web-dev-qa-db-fra.com

Vue $ route n'est pas défini

J'apprends le routeur Vue. Et je veux faire une navigation programmatique (sans <router-link>). Mon routeur et vue:

 router = new VueRouter({
        routes: [
            {path : '/videos',  name: 'allVideos', component: Videos },
            {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
        ]
    });

    new Vue({
        el: "#app",
        router,
        created: function(){
            if(!localStorage.hasOwnProperty('auth_token')) {
                window.location.replace('/account/login');
            }

            router.Push({ name: 'allVideos' })
        }
    })

Donc par défaut, j'appuie sur la route 'allVideos' et à l'intérieur de ce composant, j'ai un bouton et une méthode pour rediriger vers le bouton '' editVideo ''

<button class="btn btn-sm btn-warning" @click="editVideo(video)">Edit</button>

méthode: 

 editVideo(video) {router.Push({ name: 'editVideo', params: { id: video.id } })},

Ça fonctionne bien. Mais lorsque j'essaie d'obtenir un identifiant dans un composant VideoEdit à l'aide de $route.params.id j'ai une erreur Uncaught ReferenceError: $ route n'est pas défini

C’est peut-être parce que je n’utilise pas pour le moment npm mais une version cdn de Vue et Vuerouter. Des solutions? Merci!

Mise à jour: btw dans Vue dev tool Je vois l'instance de $ route à l'intérieur du composant

Mis à jour:  

    var VideoEdit = Vue.component('VideoEdit', {
          template: ` <div class="panel-heading">
                        <h3 class="panel-title">Edit {{vieo.name}}</h3>
                    </div>`,
                data() {
                    return {
                        error: '',
                        video: {},
                }
            },        
            created: function () {
                  console.log($route.params.id);
            },
        })
javascriptvue.jsvuejs2vue-componentvue-router
22
Bogdan Dubyk

Merci à Sandeep Rajoria

nous avons trouvé la solution, il faut utiliser this.$route sauf $route dans un composant

28
Bogdan Dubyk
import Vue from 'vue'
import Router from 'vue-router';

Vue.use(Router)

const router = new VueRouter({
    routes: [
        {path : '/videos',  name: 'allVideos', component: Videos },
        {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit },
    ]
});

new Vue({
    el: "#app",
    router,
    created: function(){
        if(!localStorage.hasOwnProperty('auth_token')) {
            window.location.replace('/account/login');
        }

        this.$router.Push({ name: 'allVideos' });
    }
})
3
Tran Hoang Hiep

Si vous utilisez vue v2 & vue-router v2, alors dans vue-cli, un moyen générique pour accéder au routeur, par exemple du composant est d'importer le routeur (exporté dans router/index.js)

<script>
  import Router from '../router';

dans votre code, vous pouvez utiliser les fonctions du routeur telles que:

Router.Push('/contacts'); // go to contacts page
1
Janne