Заставьте VueI18n реагировать на тег ссылки роутера - PullRequest
Новая
       8

Заставьте VueI18n реагировать на тег ссылки роутера

0 голосов
/ 22 января 2019

У меня есть это приложение Vue, которое состоит из простой домашней страницы, заголовка и домашнего текста.Вы можете просмотреть это приложение онлайн на моем JSFiddle .Вот код:

HTML 

<div id="app">
  My header app
  <router-view></router-view>
</div>

JavaScript 

const Home = {
    template: `
      <div>
        <h1>{{ $t('home.title') }}</h1>
        <p v-html="$t('home.text')"></p>
      </div>
    `
};

const messages = {
    en: {
    home: {
        title: 'Hello world',
        text: 'Find all post by clicking <router-link to="/post">this link</router-link>!'
    }
  }
};

const routes = [
    { name: 'home', path: '*', component: Home }
];

const i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: messages
});

const router = new VueRouter({
    mode: 'history',
    routes: routes
});

const vue = new Vue({
    el: '#app',
    router: router,
    i18n: i18n
});

Проблема

Как видите, ссылка «ссылка на маршрутизатор» не видна, и нажатие на ссылку не приведет к перенаправлению на нужный маршрут.

Вопрос

Можно ли заставить VueI18n интерпретировать тег <router-link> внутри директивы v-html?

1 Ответ

0 голосов
/ 22 января 2019

v-html заменяет содержимое элемента на обычный HTML , поэтому пользовательские элементы, используемые внутри замещающей строки, не компилируются в компоненты Vue.js.

Возможно, вы захотите проверить способ интерполяции компонентов, предложенный документацией VueI18n , который включает использование i18n функциональных компонентов и строк шаблона.

Вот ответвлениепредоставленная скрипта, которая реализует этот подход: http://jsfiddle.net/u5vx1mLq/

В двух словах, i18n компонент имеет path опору, в которую вы можете ввести строку шаблона, и tag опору, которая определяет тег, i18nкомпонент должен быть заменен на.i18n также имеет слот, который можно использовать для определения дочернего компонента, внутри которого вы можете интерполировать частичные строки шаблона.

Извините за неловкое объяснение, надеюсь, фрагмент кода пролил некоторый свет на этот вопрос: 

const Home = {
  template: `
    <div>
      <h1>{{ $t('home.title') }}</h1>
      <i18n path="home.linkLabel" tag="label" for="home.linkText">
        <router-link to="/post">{{ $t('home.linkText') }}</router-link>
      </i18n>
    </div>
  `
};

const messages = {
  en: {
    home: {
      title: 'Hello world',
      linkText: 'this link',
      linkLabel: 'Find all post by clicking {0}'
    }
  }
};
...