Use I18n in url-CodePudding

i have this url in tempalte but it doesn't works:

    <a :href="`/${i18n.locale}'/profiles/'${teammate.profile.id}`" target="_blank">Hi</a>

my i18n file

    import Vue from 'vue'
    import VueI18n from 'vue-i18n'
    
    Vue.use(VueI18n)
    
    let index = {}
    index[window.I18n_locale] = window.I18n
    
    // Ready translated locale messages
    const messages = index
    
    // Create VueI18n instance with options
    export default new VueI18n({
        locale: window.I18n_locale, // set locale
        messages, // set locale messages
    })

gives me this error in console:

Property or method "i18n" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

how should i write it to make it works?

CodePudding user response：

The variable name should be $i18n.

<a :href="`/${$i18n.locale}/profiles/${teammate.profile.id}`" target="_blank">Hi</a>

From the Vue18n documentation:

Each component contains a VueI18n instance referenced as the $i18n property...