关于国际化vue-i18n 根据地址栏/en/识别国际化的尝试

学习让我快乐```

于 2024-07-26 16:41:22 发布

阅读量124

点赞数 1

文章标签：前端 vue.js

本文链接：https://blog.youkuaiyun.com/qq_37225650/article/details/140719450

版权

路由这么写

 {
        path: '/:lang(en)?',
        component: Layout,
        redirect: '/',
        children: [
            {
                path: '',
                component: () => import('@/pages/home/index.vue'),
                name: 'home',
                meta: {
                    title: 'home',
                    isShowNav: false,
                    isTabbar: true,
                    icon: 'wap-home-o',
                },
            },

然后监听route

  const route = useRoute();
    const { locale } = useI18n();

    watch(
        () => route.params.lang,
        () => {
            const lang = route.params.lang === 'en' ? 'en-US' : 'zh-CN';
            locale.value = lang;
            useAppStore().changeLanguage(lang);
        },
        { immediate: true, deep: true },
    );