不能在鏈接中插入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> 

我<p v-bind:html='content'></p>和{{{ content }}}路線試圖在任何情況下不工作

Answer 1

雙小鬍子解釋數據爲純文本，而不是HTML。在 爲了輸出真正的HTML，你將需要使用V-HTML指令DOC

<p v-html="content" /> 

編輯

爲了使路由器連接到工作，你需要使用一個計算的屬性，返回的組件選項的對象：

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

然後使其：

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

最終結果：

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

可以使用<a>標籤。

Answer 3

您不能插入動態內容（也就是需要被編譯，就像你router-link內容）v-html，它只是針對普通的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 在的HTML，而不是在JS。