How to use routing to implement international multi-language switching in Vue?

How to use routing to implement international multi-language switching in Vue?

When developing a multi-language website, one of our important needs is to be able to switch website content according to the language selected by the user. Vue.js is a popular JavaScript framework. By using the Vue Router plug-in, we can easily implement routing functions. In this article, I will introduce how to use routing to implement international multi-language switching in Vue.

First, we need to install the Vue Router plug-in. It can be installed through the npm command:

npm install vue-router

After the installation is completed, we can introduce Vue Router into the Vue project and configure routing. In the main.js file, we can introduce and use Vue Router like this:

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  // 其他路由配置...
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Next, we need to prepare the text resource files corresponding to each language. Create a new lang folder in the src directory and create multiple language files in it, such as en.js and zh.js. These language files need to expose an object that contains the corresponding text resource:

// en.js
export default {
  home: 'Home',
  about: 'About',
  contact: 'Contact'
}

// zh.js
export default {
  home: '首页',
  about: '关于我们',
  contact: '联系我们'
}

Next, use routing and internationalization functions in the Vue component. Where text needs to be displayed, we can obtain the text corresponding to the current language through the $router object:

<template>
  <div>
    <nav>
      <router-link :to="{ name: 'Home' }">{{ $t('home') }}</router-link>
      <router-link :to="{ name: 'About' }">{{ $t('about') }}</router-link>
      <router-link :to="{ name: 'Contact' }">{{ $t('contact') }}</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    $t(key) {
      const lang = this.$router.currentRoute.meta.lang
      return this.$options.lang[lang][key] || ''
    }
  },
  metaInfo() {
    return {
      lang: 'en'
    }
  }
}
</script>

In the above code, we obtain the text resource by calling the $t method . The $t method first obtains the current language from $router.currentRoute.meta.lang, and then obtains the corresponding text resource from the $options.lang object. If the corresponding text is not found, an empty string will be returned.

In order to access the $t methods and text resource objects in the component, we need to define $t in the methods attribute of the Vue instance method, and exposes the text resource object to the component through the lang property of the $options object.

Finally, we need to add a beforeEach hook function in the routing configuration to switch the current language based on the language selected by the user:

// 在router/index.js中的router配置中添加
router.beforeEach((to, from, next) => {
  const lang = to.query.lang || 'en'
  // 设置当前路由的meta信息，在组件中可以通过this.$router.currentRoute.meta.lang获取
  to.meta.lang = lang
  next()
})

In the above code, beforeEachThe hook function uses to.query.lang to get the language selected by the user. If no language is selected, English is used by default. The language information is then stored in the meta attribute of the current route via to.meta.lang for use in the component.

At this point, we have completed the entire process of using routing to implement international multi-language switching in Vue. By using the Vue Router plug-in and some simple configurations, we can easily implement the multi-language switching function of the website. I hope this article will help you implement multi-language switching in your Vue project.

The above is the detailed content of How to use routing to implement international multi-language switching in Vue?. For more information, please follow other related articles on the PHP Chinese website!