jjzjj

javascript - 翻译 vuejs 路由路径

coder 2025-01-10 原文

我有一个关于翻译路径路径的好主意，一旦我遇到问题，这听起来不再那么聪明了:)。我希望你们能看到/找到解决方案。

这是我的 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 参数，但 this.$route.name 在旧语言中保持不变。有没有办法“重新加载”路线，这样就会有新的路线路径，其中将包括适当的语言？

如果您需要任何其他信息，请告诉我，我会提供。谢谢!

最佳答案

检查这个基本示例，您可以看到根据所选语言而变化的路径。 这可以使用 vue-i18n 等翻译插件进行改进，也可以包装到 mixin 中以提高可重用性。

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>

关于javascript - 翻译 vuejs 路由路径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53962420/

javascriptvuejs39sectiongtvue.jsvuejs2

有关javascript - 翻译 vuejs 路由路径的更多相关文章

  1. ruby - i18n Assets 管理/翻译 UI - 2

    我正在使用i18n从头开始​​构建一个多语言网络应用程序，虽然我自己可以处理一大堆yml文件，但我说的语言(非常)有限，最终我想寻求外部帮助帮助。我想知道这里是否有人在使用UI插件/gem(与django上的django-rosetta不同)来处理多个翻译器，其中一些翻译器不愿意或无法处理存储库中的100多个文件，处理语言数据。谢谢&问候，安德拉斯(如果您已经在ruby​​onrails-talk上遇到了这个问题，我们深表歉意) 最佳答案 有一个rails3branchofthetolkgem在github上。您可以通过在Gemfi

  2. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  3. ruby - rails 3 redirect_to 将参数传递给命名路由 - 2

    我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use

  4. ruby-on-rails - Rails 3，嵌套资源，没有路由匹配 [PUT] - 2

    我真的为这个而疯狂。我一直在搜索答案并尝试我找到的所有内容，包括相关问题和stackoverflow上的答案，但仍然无法正常工作。我正在使用嵌套资源，但无法使表单正常工作。我总是遇到错误，例如没有路线匹配[PUT]"/galleries/1/photos"表格在这里:/galleries/1/photos/1/edit路线.rbresources:galleriesdoresources:photosendresources:galleriesresources:photos照片Controller.rbdefnew@gallery=Gallery.find(params[:galle

  5. ruby-on-rails - Rails - 使用/自定义 URL : '/dashboard' 指定根路径 - 2

    如何使此根路径转到:“/dashboard”而不仅仅是http://example.com？root:to=>'dashboard#index',:constraints=>lambda{|req|!req.session[:user_id].blank?} 最佳答案 您可以通过以下方式实现:root:to=>redirect('/dashboard')match'/dashboard',:to=>"dashboard#index",:constraints=>lambda{|req|!req.session[:user_id].b

  6. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

    Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

  7. ruby-on-rails - 如何在 Rails 中设置路由的默认格式？ - 2

    路由有如下代码:resources:orders,only:[:create],defaults:{format:'json'}resources:users,only:[:create,:update],defaults:{format:'json'}resources:delivery_types,only:[:index],defaults:{format:'json'}resources:time_corrections,only:[:index],defaults:{format:'json'}是否可以使用1个字符串为所有资源设置默认格式，每行不带“默认值”散列？谢谢。

  8. ruby - 如何根据长度将路径数组转换为嵌套数组或散列 - 2

    我需要根据字符串路径的长度将字符串路径数组转换为符号、哈希和数组的数组给定以下数组:array=["info","services","about/company","about/history/part1","about/history/part2"]我想生成以下输出，对不同级别进行分组，根据级别的结构混合使用符号和对象。产生以下输出:[:info,:services,about:[:company,history:[:part1,:part2]]]#altsyntax[:info,:services,{:about=>[:company,{:history=>[:part1,:pa

  9. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  10. ruby-on-rails - 如何播种图像的路径？ - 2

    Organization和Image具有一对一的关系。Image有一个名为filename的列，它存储文件的路径。我在Assets管道中包含这样一个文件:app/assets/other/image.jpg。播种时如何包含此文件的路径？我已经在我的种子文件中尝试过:@organization=...@organization.image.create!(filename:File.open('app/assets/other/image.jpg'))#Ialsotried:#@organization.image.create!(filename:'app/assets/other/i

随机推荐