vuej 루트 경로 변환

vuej 루트 경로 변환

루트 패스의 번역에 관한 좋은 아이디어가 떠올랐습니다만, 지금은 그다지 영리하게 들리지 않습니다. :) 문제가 발생했을 때.여러분이 해결책을 찾기를 바랍니다.

이것은 루트가 정의되는 my routes.js 파일입니다.

export default [
    {
        path: '/:lang',
        component: {
            template: '<router-view></router-view>'
        },
        children: [
            {
                path: '',
                name: 'Home',
                component: load('Home')
            },
            {
                path: translatePath('contact'),
                name: 'Contact',
                component: load('Contact')
            },
            {
                path: translatePath('cookiePolicy'),
                name: 'CookiePolicy',
                component: load('CookiePolicy')
            },
        ]
    },
]

// and my simple function for translating paths
function translatePath(path) {
    let lang = Cookie.get('locale');

    let pathTranslations = {
        en: {
            contact: 'contact',
            cookiePolicy: 'cookie-policy',
        },
        sl: {
            contact: 'kontakt',
            cookiePolicy: 'piskotki',
        }
    };

    return pathTranslations[lang][path];
}

그리고 이것은 내 컴포넌트의 언어 변경 기능이다.

setLocale(locale) {
    let selectedLanguage = locale.toLowerCase();
    this.$my.locale.setLocale(selectedLanguage); // update cookie locale
    console.log(this.$route.name);
    this.$router.replace({ name: this.$route.name, params: { lang: selectedLanguage } });
    location.reload();
},

문제는 다음과 같다.사용자가 언어 변경 기능을 실행하면 lang param은 정상적으로 변경되지만this.$route.name옛날 언어에서도 똑같아요.적절한 언어를 포함한 새로운 루트 경로가 생성되도록 루트를 '새로고침'하는 방법이 있습니까?

추가 정보가 필요하시면 알려주시면 알려드리겠습니다.감사해요!

이 기본 예를 보면 선택한 언어에 따라 변경되는 경로를 볼 수 있습니다.vue-i18n과 같은 일부 변환 플러그인을 사용하여 이를 개선할 수 있으며, 혼합 플러그인으로 포장하여 재사용할 수도 있습니다.

const Home = {
  template: '<div>Home</div>'
}
const Contact = {
  template: '<div>CONTACT ==> {{$route.path}}</div>'
}
const Cookie = {
  template: '<div>COOKIE ==> {{$route.path}}</div>'
}

const router = new VueRouter({
  routes: [{
      name: 'home',
      path: '/',
      component: Home
    },
    {
      name: 'contact',
      path: '/:pathTranslation',
      component: Contact
    },
    {
      name: 'cookies',
      path: '/:pathTranslation',
      component: Cookie
    }
  ]
})

new Vue({
  router,
  el: '#app',
  data: {
    lang: 'IT',
    translations: {
      IT: {
        contact: 'Contatti',
        cookies: 'Cookies IT',
      },
      EN: {
        contact: 'Contacts',
        cookies: 'Cookies EN',
      }
    }
  },
  watch: {
    lang: function(newLang) {
      this.goto(this.$route.name, newLang);
    }
  },
  methods: {
    goto(path, lang=null) {
      this.$router.replace({
        name: path,
        params: {
          pathTranslation: this.translations[lang || this.lang][path]
        }
      });
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <select v-model="lang">
    <option value="IT">IT</option>
    <option value="EN">EN</option>
  </select>
  <button @click="goto('contact')">To contact</button>
  <button @click="goto('cookies')">To cookies</button>
  <router-view></router-view>
</div>

언급URL : https://stackoverflow.com/questions/53962420/translate-vuejs-route-paths