wake-up-neo.com

Vue $ route ist nicht definiert

Ich lerne Vue Router. Und ich möchte eine programmatische Navigation (ohne <router-link>) vornehmen. Mein Router und meine Ansicht:

 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' })
        }
    })

Standardmäßig schiebe ich die "allVideos" -Route und in dieser Komponente habe ich eine Schaltfläche und eine Methode zum Umleiten zu "" editVideo "

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

methode: 

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

Es funktioniert gut. Aber wenn ich versuche, eine ID in eine VideoEdit-Komponente mit $route.params.id zu bekommen, habe ich den Fehler Uncook ReferenceError erhalten: $ route ist nicht definiert

Vielleicht liegt es daran, dass ich npm momentan nicht einfach nur eine cdn-Version von Vue und Vuerouter verwende. Irgendwelche Lösungen? Vielen Dank!

Updated: Übrigens in Vue dev tool Ich sehe $ route Instanz in der Komponente

Aktualisierte: 

    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

Dank an Sandeep Rajoria

wir haben eine Lösung gefunden, die this.$route außer $route in einer Komponente verwenden muss

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

In meinem Fall funktionieren diese vorherigen Lösungen nicht für mich, daher habe ich Folgendes getan

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

dann können Sie in Ihrem Code diesen verwenden

this.$router.Push('/contacts');

1
Houndjetode Noukpo Herve

Für diejenigen, die den Fehler nach dem Hinzufügen von this erhalten

TypeError: Cannot read property '$route' of undefined

Wir müssen ein reguläre Funktion anstelle von ES6-Pfeilfunktionen verwenden

data: function() {
    return {
      usertype: this.$route.params.type
    };
  },

Das hat bei mir funktioniert.

1
Kishan Vaghela

Wenn Sie vue v2 und vue-router v2 verwenden, wird in vue-cli eine Boilerplate-Methode generiert, um auf den Router zuzugreifen, z. von der Komponente wird der Router importiert (exportiert in router/index.js)

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

dann können Sie in Ihrem Code Router-Funktionen wie verwenden:

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