リンク内にvue-routerタグを挿入できません

Question

私はユーザーが登録してメンバーになることを許可するVuejsアプリケーションを持っています。 プロセスの成功/失敗に関連するメッセージを格納するためにvuexを追加しました。

現在、すべてが私はこのような変数内のリンクを[VUE-ルータ]を保存し、表示するようにしようとする場合を除いて動作します：私は、すべてのプロパティを取得し、それらを表示することができますが、今

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

<router-link to="/profile"> here </router-link>タグは想定通りに変換（または機能）しません。

これは表示方法です。

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

は、私はあなたが <a>タグを使用することができ、いずれの場合に

Answer 1

ダブルキャッチは、データをHTMLではなくプレーンテキストとして解釈します。出力実際のHTMLに ためには、あなたが動作するようにルータのリンクを作成するためには、あなたがその計算されたプロパティを使用する必要があるV-HTMLディレクティブDOC

<p v-html="content" /> 

EDIT

を使用する必要がありますコンポーネントのオプションのオブジェクトを返す：

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

そして、それをレンダリング：

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

最終結果：あなたはv-htmlと動的なコンテンツを（それがあなたのrouter-linkのように、コンパイルする必要のあるコンテンツを言うことです）を挿入することはできません

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

機能しない<p v-bind:html='content'></p>と{{{ content }}}ルートを試してみました。

Answer 3

は、それだけで通常のHTMLのためのものです。代わりの方法として、router-linkをテンプレートに入れて、v-ifスイッチで非表示にすることをお勧めします。これは、スイッチを切り替えるとレンダリングされ表示されるだけです。

テンプレート

<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 
    ... 

一般的に私はそれがHTMLではなく、JS内のすべてのhtmlを維持するために非常に明確だと信じています。あなただけに、ルータリンクタグを変更し、それが動作しません持って