web-dev-qa-db-fra.com

vue.js this. $ router undefined

Je deviens indéfini pour

ceci. $ router

non défini dans App.vue et d'autres composants. Je n'ai pas pu trouver de solution.

ici une partie de mon main.js

Vue.use(VueRouter);
Vue.use(VueResource);

const router = new VueRouter({
    routes: Routes,
    mode: 'history'
});

new Vue({
    el: '#app',
    render: h => h(App),
    router
});

et ici mon router.js que j'importe dans main.js.

export default [
    {path: '/', component: Home, name: 'home'},
    {path: '/home', component: Home, name: 'home2'},
    {path: '/user/login', component: Login, name: 'userLogin'}
];

Je vous remercie :)

Éditer

Je l'utilisais dans des balises de script comme celle-ci,

<script>
    import HeadNavBar from './components/HeadNavBar.vue';
    import SideBarNav from './components/SideBarNav.vue';
    import Home from './components/Home.vue';


    console.log(this.$router,pus); //the undefined type

    export default {
        name: 'app',
        data() {
            return {
                isLogin: true
            }
        },
        components: {
            'app-headnav': HeadNavBar,
            'app-sidebarnav': SideBarNav,
            'app-home': Home
        }

    }
</script>

mais quand je l'ai déplacé dans la section méthode, j'ai obtenu la réponse que je voulais.

export default {
    name: 'app',
    data() {
        return {
            isLogin: true
        }
    },
    components: {
        'app-headnav': HeadNavBar,
        'app-sidebarnav': SideBarNav,
        'app-home': Home
    },methods: {
        myFunc: function() {
            console.log(this.$router,pus); // this gave result
        }
    }
}
javascriptvue.jsvuejs2vue-router
9
sudo

Je ne peux reproduire l'erreur undefined pour this.$router Que lorsque j'utilise un fonction flèche (c'est peut-être ce que vous faites), ce que documentation Vue déconseille:

N'utilisez pas les fonctions fléchées sur une propriété d'options ou un rappel, comme created: () => console.log(this.a) ou vm.$watch('a', newValue => this.myMethod()). Comme les fonctions fléchées sont liées au contexte parent, this ne sera pas l'instance Vue comme vous vous y attendez, ce qui entraîne souvent des erreurs telles que Uncaught TypeError: Cannot read property of undefined Ou Uncaught TypeError: this.myMethod is not a function.

Voici un exemple de la journalisation des rappels mounted avec succès this.$router:

<script>
  export default {
    name: 'app',

    // DON'T USE ARROW FUNCTIONS HERE
    // mounted: () => {
    //   console.log({router: this.$router});
    // },

    mounted() {
      console.log({router: this.$router});
    }
  }
</script>
9
tony19

Je sais que c'est vieux, mais je vais partager quelque chose que j'ai rencontré et comment je m'en suis sorti au cas où quelqu'un se débattrait là-bas.

Mon scénario est un projet vue/météore.

Dans les fonctions/gestionnaires, "ceci" fait référence à la cible de la fonction, donc ceci. $ Router recherche $ router dans la fonction ou la cible elle-même.

    ///////DOESN'T WORK ///////////
  mounted: function () {
    $(document).on('click', '.element', function(){
             //this is recognized as 
             this.$router.Push(PATH)
        });
  },


    ////////THIS WORKS//////////
  mounted: function () { 
    //make router defined outside of function.
    var navigate = this.$router;

     $(document).on('click', '.element', function(){
        navigate.Push(PATH)
     });
  }
1
Jason Ulwelling

La console.log(this.$router,pus) au-dessus de export est exécutée lors de l'importation du composant. Cela s'est produit avant la création du composant. Donc this n'est qu'un objet vide {}.

Vous devriez obtenir le this.$router à l'intérieur des méthodes de l'objet d'exportation.

1
DRL

nous avons une même erreur, dans ce cas j'ai corrigé cela, je viens d'importer les fichiers du routeur dans mon composant comme ça et ça marche:

importer des fichiers/configuration de routeur dans mon composant:

import router from '../router'

et je peux l'utiliser comme ceci:

router.replace('home')

et cela devrait fonctionner

mon code complet:

<script>
import router from '../router'
export default {
  methods: {
  signIn: function () {
    firebase
    .auth().signInWithEmailAndPassword(this.email, this.password).then(
      function (user) {
        router.replace('home')
      },
      function (err) {
        alert('Maaf, ' + err.message)
      }
    )
  }
 }
}
</script>
0
Arian saputra