开启掘金成长之旅！这是我参与「掘金日新计划 · 2更文挑战」的第12天点击查看活动详情

前言

这几天遇见了一个问题，之前写的中英文翻译页面我是用的i18n这个插件的，但是最近发现盆友的一个做法是比较合适的，他的做法就是利用router-view在不同的语言环境下切换不同的组件进行渲染。

i18

这个插件是饿了么ui中自带的，用的时候需要去下载这个插件，用的时候也非常方便。使用方式可以到我的主页中查看，或者直接点击这个地址查看。juejin.cn/post/715382…

i18这个插件是好用，但是也有不足的地方。

优点：

首先就是节约项目的体积大小，他只需要你同一个页面创建一个组件就可以进行不同环境下的展示。

缺点：

1.如果我的页面需要支持多国语言的，那么是不可行的，i18只是提供了一种文本的切换，不支持超过两种语言文本的切换，（如果你有支持两种以上的解决方式，那就当我没说好了）

2.页面在用同一个组件时，里面就牵扯到样式的变动，所以你要么时添加动态样式，要么就是里利用函数进行样式的调整。

3.假设遇见一个这样的场景：翻译页面翻译人员的翻译文本，但是中文还是调用接口数据来进行展示，那么你在使用的时候很有可能导致页面的文本显示是固定的，除非是添加新的页面，新的页面用接口数据，原页面用翻译数据。

Vue-路由分配

首先看下我们一般的路由代码；

mode: 'history',
routes: [{
        path: '/',
        component: phoneLayout,
        redirect: '/',
        children: [{
                path: '/', // 首页
                name: 'Home',
                component: () =>
                    import ('./views/home/index-phone')
            },
            {
                path: '/Microservice', // 产品服务--咨询服务--微服务咨询
                name: 'Microservice',
                component: () =>
                    import ('./views/product/Microservice/indexPhone.vue')
            },
            {
                path: '/product/BeyondContainer', // 产品服务--应用管理 --容器云
                name: 'BeyondContainer',
                component: () =>
                    import ('./views/product/BeyondContainer/indexphone.vue')
            },
    {
        path: "/notFond",
        name: "notFond",
        component: () =>
            import ("./layout/phone/notFond.vue")
    }
]

可以看出我们的每一个路径都是对应的一个默认的组件，component对应一个组件，这是我们常用的方式来做路由的跳转展示。

components

// GitHub
{
    path: '/GitHub', // 博客
    name: 'GitHub',
    components: {
        a: () =>
            import ('./views/GitThub/Github.vue'),
        default: () =>
            import ('./views/GitThub/Github.vue')
    }
},
// 视频教程
{
    path: '/video', // 博客
    name: 'Video',
    components: {
        a: () =>
            import ('./views/videos/video'),
        default: () =>
            import ('./views/videos/video')
    }
},

router中还有一个属性components，它是支持多个组件的，利用这个特性我们就可以做到不同环境下的不同组件的展示。

前提是要在router-view中做出对应的判断：

app.vue：

<template>
     <div id="app"> 
        // 利用if判断做出不同的对应组件的输出展示
        <router-view v-if="$store.state.lang == 'zh'"></router-view>
        <router-view v-else name="a"></router-view>
     </div>
</template>