Zugriff auf $ route.params in VueJS

Question

durch diese Dokumentation der Suche: https://router.vuejs.org/en/essentials/navigation.html

Es sieht aus wie Sie die <router-link :to="variableName">Link Text</routerlink> binden kann, die ziemlich raffinierte ist; Ich hatte jedoch Probleme beim Zugriff auf Routenparameter innerhalb einer Komponente, die ich erstellen möchte.

So verwende ich dies:

<router-link :to="permalink">Title of thing</router-link> 

dann Um die Router Ansicht zu lenken den Foren-Thread zu ziehen. Mit diesem im Router:

import ForumThread from './views/barracks/forumThreadSingle'; 

// Other routes... 
let routes = [ 
    { 
     path: '/barracks/th/:id', 
     component: ForumThread, 
    } 
]; 

ich in der forumthread Komponente sehen, die $ route.params.id es zu übergeben wird; Wenn ich jedoch versuche, darauf zuzugreifen:

console.log('The id is: ' + $route.params.id); 

Es ist nicht in der Lage, den Params-Teil des Objekts zu finden.

VueJS ist ziemlich neu für mich sowie JavaScript selbst. Alle Beispiele, die ich gesehen habe, zeigen, dass die Vorlagen mit der Router-Datei in Verbindung stehen, was ich verhindern möchte, damit mein Code lesbar und sauber bleibt.

Welche Anpassungen kann ich vornehmen, damit ich Eigenschaften an die Vorlagendatei übergeben kann?

Danke!

Answer 1

Wenn Sie das Vue Loader-Setup verwenden Tags in den Dateien (die <template></template> hat), müssen Sie this verwenden, um die $ Router zu verweisen, wenn Sie so im <script></script> Teil der Datei zu tun.

console.log('The id is: ' + this.$route.params.id);