Impossible d'insérer la balise Vue-routeur à l'intérieur du lien

Question

J'ai une application Vuejs dans laquelle j'autorise les utilisateurs à s'inscrire et à devenir membres. J'ai ajouté vuex pour stocker les messages liés à la réussite/l'échec du processus.

Actuellement, tout fonctionne, sauf lorsque je tente de stocker et afficher un lien [vue-routeur] à l'intérieur d'une variable comme ceci:

... 
Registration() { 
    if(true) { 
    this.$store.commit('SET_MESSAGE', { 
    type: 'success', 
    title: 'Registration Success', 
    content: 'please click <router-link to="/profile"> here </router-link> to see your profile' 
    } 
} 

Maintenant, je peux récupérer toutes les propriétés et les afficher, mais le <router-link to="/profile"> here </router-link> tag ne transforme pas (ou fonctions) comme il est censé.

Voici comment je l'affiche.

<div class="alert alert-dismissible" :class="'alert-' +type" > 
<h1> {{tilte}} </h1> 
<p> {{content}} </p> 
</div> 

J'ai essayé avec <p v-bind:html='content'></p> et {{{ content }}} la route ne fonctionne pas dans les deux cas

Answer 1

La double moustache interprète les données en texte brut et non en HTML. Dans Pour la production réelle HTML, vous devrez utiliser la directive v-html DOC

<p v-html="content" /> 

EDIT

Afin de routeur lien fonctionne, vous devez utiliser une propriété calculée qui renvoyer un objet d'options de composants:

computed: { 
    contentComp() { 
    return { template: `<p>${this.content}</p>` } 
    } 
} 

rendre ensuite il:

<component :is="contentComp"></component> 

Résultat final:

const profile = { 
 
    template: '<div> profile page! </div>' 
 
} 
 

 
const router = new VueRouter({ 
 
    routes: [{ 
 
    path: '/profile', 
 
    component: profile 
 
    }] 
 
}) 
 

 
new Vue({ 
 
    router, 
 
    el: '#app', 
 
    data: { 
 
    title: 'Registration Success', 
 
    content: 'please click <router-link to="/profile"> here </router-link> to see your profile' 
 
    }, 
 
    computed: { 
 
    contentComp() { 
 
     return { 
 
     template: `<p>${this.content}</p>` 
 
     } 
 
    } 
 
    } 
 
})

<script src="https://npmcdn.com/vue/dist/vue.js"></script> 
 
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    <h1> {{title}} </h1> 
 
    <component :is="contentComp"></component> 
 
    </div> 
 
    <router-view></router-view> 
 
</div>

Answer 2

Register() { 
    if(ok) { 
    this.$store.commit('SET_MESSAGE', { 
    type: 'success', 
    title: 'Registration Success', 
    content: 'please click <a href="/profile"> here </a> to see your profile' 
    } 
} 

Vous pouvez utiliser la balise <a>.

Answer 3

Vous ne pouvez pas insérer du contenu dynamique (c'est-à-dire le contenu qui doit être compilé, comme votre router-link) avec v-html, il est seulement destiné à html régulier . Je suggère une autre approche, qui est de mettre votre router-link dans le modèle, mais cachez-le avec un commutateur v-if, de cette façon il sera rendu et affiché seulement une fois que vous basculez le commutateur.

Modèle

<span v-if="displayRouter"> 
    please click <router-link to="/profile"> here </router-link> to see your profile 
</span> 

JS

Registration() { 
    if(true) { 
    this.displayRouter = true 
    ... 

En général, je crois qu'il est beaucoup plus clair pour garder tout le html dans le code html, pas dans la JS.