Vue « не работает при передаче в литералах шаблонов данных?

#vue.js #vue-router #routerlink

Вопрос:

Я передал <router-link> с ${...} домашней страницей и без ${...} страницы входа в систему, но ни одна из них не работает при передаче в шаблоне.

 data(){
  return {
    content: `
        <p>Click ${<router-link to="{name: 'home'}">homepage</router-link>} 
        or <router-link to="/login">login</router-link> to proceed.</p>`
  },
}
 

передача данных в шаблонах:

 <h2 v-html="item.content"></h2>
 

и результат таков:

введите описание изображения здесь

и вот как это выглядит в консоли:

введите описание изображения здесь

Может ли кто-нибудь помочь, чтобы он работал как a ссылки и переходил на маршрут? Заранее спасибо.

Комментарии:

1. Почему бы просто не использовать <p>Click <router-link to="{name: 'home'}">homepage</router-link> or <router-link to="/login">login</router-link> to proceed.</p> ?

2. поскольку объект, который вы видите, находится в массиве из 100 объектов, перебирать их проще, чем жестко кодировать, как описано выше

3. Вы должны описать это в своем первоначальном вопросе, потому что то, как написан вопрос, не очень понятно, каковы ваши конечные цели

4. Вы должны использовать функцию визуализации, а не шаблон. Функции рендеринга были изобретены именно для такого рода работы.