开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Vue路由器i18n重定向至路由中的重复区域设置

Vue路由器是Vue.js官方提供的一个用于构建单页面应用（SPA）的插件。它通过管理不同路径下的组件展示，实现页面间的无刷新切换。而i18n则是国际化的缩写，指的是将软件或应用程序适应多种语言和地区的过程。

在Vue路由器中，可以使用i18n插件来实现根据用户选择的语言版本，重定向到具有相应语言版本的路由区域设置。具体实现步骤如下：

首先，在Vue.js项目中安装并引入Vue路由器和Vue-i18n插件。
创建一个i18n实例，并在其中配置支持的语言列表，每个语言对应的路由区域设置，以及相应的翻译消息。
创建一个i18n实例，并在其中配置支持的语言列表，每个语言对应的路由区域设置，以及相应的翻译消息。
在路由器中设置一个全局的导航守卫，用于重定向至带有正确语言版本的路由区域设置。
在路由器中设置一个全局的导航守卫，用于重定向至带有正确语言版本的路由区域设置。
在具体的路由设置中，可以通过在路由路径中指定语言版本参数来触发重定向。
在组件中使用i18n插件提供的 $t 方法来获取翻译消息。
在组件中使用i18n插件提供的 $t 方法来获取翻译消息。
在上述示例中，$t('home.title') 和 $t('home.description') 分别获取了名为 'home' 的翻译消息对象中的 'title' 和 'description' 字段。

这样，当用户访问具有语言参数的路由时，Vue路由器会根据用户选择的语言版本重定向到对应的语言版本路由区域设置，并在组件中使用i18n插件进行翻译。

关于Vue路由器和i18n插件的更多详细信息和用法，请参考腾讯云的相关文档：

Vue路由器：Vue Router
Vue-i18n插件：Vue I18n

相关搜索:如何在Vue路由器中为除默认区域设置之外的所有区域设置添加i18n区域设置前缀？重定向至vuejs中不存在路由器链路时的页面 Vue的i18n中链接区域设置消息的参数化格式重定向至登录时的上一路径- React路由器v4 使用vue.js，我如何设置带有嵌入子路由器的动态路由器链路？更改区域设置时i18n vue不起作用，请使用vuetify的文本字段中的规则将vue.js - vue-i18n中使用i18n (区域设置)的值舍入为3个十进制值 jstor数据库 k8s 数据同步 kangle脚本

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

浅学前端：Vue篇（五）

git checkout -b i18n remotes/origin/i18n # 将git的地址凡是以git://打头的，都替换为https://打头 # 因为npm的过程需要访问以为git仓库...，因此只能用 actions登录成功会优先跳转至 this.redirect 路径、否则跳转至 // 查看 src/router/index.js 的路由表可知，会重定向至 /dashboard2. src...，其中固定不变的是侧边栏导航栏标签栏设置变化的是中间的 dashboard 部分（AppMain），它由 router-view 配合子路由切换显示进入 / 后，就会 redirect 重定向到 /dashboard...client_id=${client_id}&redirect_uri=${redirect_uri}&response_type=codegitee 认证通过，重定向至 8080，并携带 code8080...的老窗口这里又会涉及到跨域，不过 9527 与 8080 直接存在信任关系，设置一下就好9527 再走之前的逻辑就可以了，在 router 的 beforeEach 方法里，用 8080 token

2102 0

Vue-Router学习笔记，持续记录

+Vue Router主要用于单页面应用创建；vue-router.js会暴露一个VueRouter构造方法，通过传入一个路由规则配置对象创建路由器（Router）; //Vue2.x const router...路由组件比普通组件会多route（当前组件相关的路由信息）和router（指向定义的整个路由器）属性；通过注入路由器，我们可以在任何组件内通过 this.router 访问路由器，也可以通过 this.route...3.路由中不需要使用Vue3.x中的异步组件，因为路由本身就支持动态引入，组件跟普通组件一样的定义即可； 4. useRouter执行一定要放在setup方法内的顶部或者其他位置，不能放在下面setup...例如h5plus的plus 对象，原本设置的是在App.vue内监听加载事件初始化之后才能调用的全局对象，但是由于路由不是懒加载，组件内调用的外部js提前运行并调用了plus对象，导致js发生致命错误。...重定向的路径可以是绝对路径也可以是相对路径；父路由可以不绑定组件；子路由会直接显示到上层组件； 13.子组件的router-view 子组件内写的router-view可以作为父路由组件的渲染区域。

9.2K4 0

OSPF 高级特性

lsdb router LS ID：指发出该条LSA的路由器的Router-id Adv Rtr：又叫始发路由，指产生该条LSA的路由器的Router-id Link Count：代表该台路由器传递了多少条链路...++ Data：++本路由器在该网段的IP地址++ P2P：链路类型为PPP Link-ID：++该网段对端路由器的Router-id++ Data：++本路由器与对端路由器相连接的接口的IP地址++...相关命令： [区域]：stub #在OSPF区域内设置stub > Totaly Stub区域又叫完全末梢区域，和上面的stub区域的特性一样，适用于低性能路由器是，不需要接受大量外部AS路由的场景...">不允许Type4和Type5进入建议手动配置ABR下发Type7类的缺省路由，本区域允许存在ASBR 引入的外部路由以Type7存在，由ABR将Type7转换为Type5类传递至其他区域...，会把除第一条意外的外部路由产生的5类LSA的LS ID的主机位做劝返炒作，来防止LS ID冲突，因为在OSPF路由中LS ID具有唯一性。

6212 0

Vue-i18n 国际化

from 'vue-i18n' Vue.use(VueI18n) const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages.../en' Vue.use(VueI18n) const i18n = new VueI18n({ // 设置当前语言 locale: 'zh', messages: {...$i18n.locale = 'zh' } } 此时的切换知识页面语言，和系统没有关系，如果刷新页面，还是会回到中文设置切换浏览器语言上边写的当前的语言切换是默认的状态，初始化的时候一定加载的是默认的...，比如默认的是中文，无论你后期改成什么状态，最后重新加载时一定是中文此时需要设置系统的语言环境使用localStorage去辅助完成国际化的语言环境设置比如目前只支持中英文此时需要获取当前的语言状态.../en' Vue.use(VueI18n) //设置语言环境 //获取浏览器的语言 //console.log(navigator.language) //浏览器的语言 const navLang =

7241 0

Vue-Router

转送将输入端的数据转移到合适的输出端. 路由中有一个非常重要的概念叫路由表.路由表本质上就是一个映射表, 决定了数据包的指向....三 .Vue-router的功能 *Vue Router是Vue.js的官方路由器。它与Vue.js核心深度集成，使使用Vue.js轻松构建单页应用程序变得轻而易举。...功能包括：嵌套路线/视图映射模块化，基于组件的路由器配置路由参数，查询，通配符查看由Vue.js过渡系统提供动力的过渡效果细粒度的导航控制与自动活动CSS类的链接 HTML5历史记录模式或哈希模式...path配置的是根路径: / redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了. 如何改变Vue-router加载组件的方式?..., 会自动给当前渲染的标签元素设置一个router-link-active的class, 在标签内设置active-class可以修改默认的名称router-link-active.

2.3K1 0

（17）打鸡儿教你Vue.js

v-link="{ path: '/home'}">Home About /* 创建路由器...：创建VueRouter实例映射路由：调用VueRouter实例的map方法启动路由：调用VueRouter实例的start方法使用v-link指令使用标签 router.redirect...使用v-link指令使用标签 router.redirect router.redirect({ '/': '/home' }) router.redirect方法用于为路由器定义全局的重定向规则...$route.params 包含路由中的动态片段和全匹配片段的键值对 $route.query 包含路由中查询参数的键值对 $route.router 路由规则所属的路由器 $route.name...当前路径的名字执行以下命令安装vue cli npm install -g vue-cli 使用vue-webpack-simple模板运行Git Bash Here vue init webpack-simple

3463 0

基于Vue2.x的前端架构，我们是这么做的

通过Vue CLI可以方便的创建一个Vue项目，但是对于实际项目来说还是不够的，所以一般都会根据业务的情况来在其基础上添加一些共性能力，减少创建新项目时的一些重复操作，本着学习和分享的目的，本文会介绍一下我们...权限我们的权限颗粒度比较大，只控制到路由层面，具体实现就是在菜单配置和路由配置里的每一项都新增一个code字段，然后通过请求获取当前用户有权限的code，没有权限的菜单默认不显示，访问没有权限的路由会重定向到...请求public目录下的对应json文件，调用VueI18n的方法动态进行设置。.../i18n' // 请求并设置多语言数据 const languageCache = {} export const setLanguage = async (language = 'zh_CN')...，那么你可以这么使用： vue create --preset wanglin2/Vue_project_design project-name 总结如果有哪里不对的或是更好的，评论区见~ 我的博客即将同步至腾讯云

1.6K2 0

通过 Laravel 创建一个 Vue 单页面应用（五）

上述路由是有效的，所以我们需要我们的组件渲染 error 组件或者将用户重定向到一个专用的404路由。...我们将在 resources/assets/js/app.js 中Vue 路由的配置中添加一些新路由，这些路由提供一个专门的404视图和一个可以将所有无法匹配的路由重定向到404路由的万能路由： { path...*'); 如果你数入一个无效的 URL 比如 /does-not-exist,你会看到像下面的一堆东西: Vue路由器触发了会将浏览器重定向到 /404 的通配符路由规则。...接下来是什么我们学习了如何通过 Vue 路由器在前端删除用户并对成功删除做出响应.。...我们通过在主 app.js 文件中用vue.use(vue router) 注册vue路由器，引入了通过 this.$router 属性的编程导航。

4.4K2 0

【重识云原生】第四章云网络4.3.4.1-2节——OSPF协议

，总是把别人的路由表拿来就用；而OSPF完全抛弃了这种不可靠的算法，OSPF是典型的链路状态路由协议，路由器之间交换的并不是路由表，而是链路状态，OSPF通过获得网络中所有的链路状态信息，从而计算出到达每个目标精确的网络路径...（5）OSPF 协议的设计是为了避免路由环路：在使用最短路径的算法下，收到路由中的链路状态，然后生成路径，这样不会产生环路。（6）应用广泛：广泛的应用在互联网上，其他会有大量的应用实例。...（具体邻居、邻接关系后面还会详细讲到） 2.6 Router ID、邻居与邻接 2.6.1 Router ID 概念：OSPF路由器在本AS（自治系统）内的唯一标识（不能重复，重复则一直报错，不能建立邻居关系...ID 在实际情况中，Router ID的变化采取稳定大于一些的原则：在设置好了Router ID之后，再去修改，不生效。...2.7 LSA（链路状态广播） LSA（链路状态广播，Link State Advertisement）是链接状态协议使用的一个分组，它包括有关邻居和通道成本的信息，是路由器之间链路状态信息的载体

7042 0

vue学习笔记router传参

这是刚入门vue的第五天，刷视频整整刷了100多p，过程是艰辛的。...$router.push({ path:’/p2′, 需要跳转到的路劲 query:{ // 跳转时携带的query数据 name:’首页’, ...children children:[ // { // path:”, // // 进入路由后默认的跳转链接 redirect 重定向 /... :to=”‘/p2/’+msg”> p2 // 2.然后需要在路由中设置动态路由，因为传递的参数是不确定的，所以必须要动态路由。 ...// 3.这种方法不需要在路由中绑定动态路由来传递因为不是用的 $route.params 方法来获取的。

8090 0

Vue Router详细教程

1.什么是路由 1.1路由简介说起路由你想起了什么？路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。...在生活中，我们有没有听说过路由的概念呢? 当然了，路由器嘛。路由器是做什么的? 你有想过吗?路由器提供了两种机制: 路由和转送。路由是决定数据包从来源到目的地的路径。...转送将输入端的数据转移到合适的输出端。路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表，决定了数据包的指向。 1.2后端路由阶段早期的网站开发整个HTML页面是由服务器来渲染的。...// path配置的是根路径: /，redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了。..., 后退键返回不能返回到上一个页面中 active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class

3.7K3 0

Vue 06.路由

({ el: '#app', router: routerObj // 将路由规则对象，注册到 vm 上，监听 URL 地址的变化，然后展示对应的组件 }); 重定向 路由匹配规则可以设置重定向到某个其他路由...{ path: '/', redirect: '/login' } // 这里的 redirect 和后端的 redirect 完全是两码事设置路由高亮设置当前路由下的router-link链接的高亮...（或其他样式）有两种方式第一种：通过给默认激活的类加样式，即给router-link-active类加第二种：给路由对象设置linkActiveClass属性，然后给设置的类名加样式 var routerObj...$route.query获取路由中的参数 var login = { template: '登录 --- {{ $route.query.id }} --- {{ $route.query.name...$route.params来获取路由中的参数： var register = { template: '注册组件 --- {{this.

5661 0

nuxt3目录结构详解

/ --| base/ ----| foo/ ------| Button.vue 然后组件的名称将基于它自己的路径、目录和文件名，删除重复的段。...{ path: '/' }) - 重定向到给定的路径，并将重定向代码设置为302 Found，如果重定向发生在服务器端 return navigateTo('/', { redirectCode: 301...}) - 重定向到给定的路径，并将重定向代码设置为301 Moved permanent，如果重定向发生在服务器端 return abortNavigation() - 停止当前导航 return abortNavigation...Using app/router.options 这是指定路由器选项的推荐方法。...在这种模式下，路由器在内部传递的实际URL之前使用一个哈希字符(#)。当启用时，URL永远不会发送到服务器，SSR不支持。

2.3K1 0

OSPF、EIGRP、RIPv2、IS-IS、BGP动态路由大家庭，网工收藏！

BGP邻居发布的路由中包含每条具有AS路径属性的转发路径的向量（方向）信息。路由选择算法不同路由协议之间和同一路由协议内的路由选择都有规则。...区域 OSPF 是一种分层的分层架构，定义为具有单个或多个区域，单区域设计通常使用较小的网络域来实现，以便在发生链路故障时实现更快的收敛，多个区域的优势主要是在更大的网络域内，每个区域的每个路由器上都有较小的路由表...表 3 OSPF 区域和 LSA 类型路由收敛链路状态协议的主要特征是在一个区域内的所有邻居之间交换链路状态时创建的全局拓扑数据库，所有区域之间也有链路状态通告，并且路由安装在路由表中。...有一个两级层次结构，包括第 1 级路由器（区域内）、第 1 级/第 2 级路由器 (ABR) 和第 2 级路由器（骨干网），与 OSPF 不同的是，每个路由器只能分配到一个区域，因此路由器是区域之间的边界...路径属性有一种路径选择算法，可以根据路径属性策略选择最佳路由，每个路径属性还有一个默认设置，在未配置策略时使用该设置。

1.2K1 0

5-网络层（下）

LS主要思想发现：发现邻居节点，了解它们的网络地址设置：设置规定到每个邻居的成本度量构造：构造分组，包含所了解到的所有信息发送：将这个分组发送给其他路由器 计算：计算到每个路由器的最短路径发现...Name）设置设置链路成本（开销/量度/代价）可以自动发现设置或是采用人工设置，常见的量度是设置为与链路带宽成反比延迟也可以作为量度 路由器会发送一个特别的ECHO分组，另一端立刻回送一个应答...如果来自相同路由器的另一个分组到达了，这两个分组的序列号会被比较：如果相等，是重复分组，丢弃如果不相等，旧的那个被丢弃计算当一个路由获得了全部链路状态分组就可以构造出全网络的拓扑图来了，这种拓扑图一般采用最短路径算法...---- 单区域OSPF 开放的最短路径优先协议(Open Shortest Path First) 链路状态路由典型实例，在TCP/IP协议种，OSPF位于IP协议之上，OSPF是一种基于开放标准的链路状态路由协议...链路状态更新(LSU) 向邻居路由器发送链路状态通告，或是网络中发生一些事件例如出现DOWN机时，都会导致感知到的路由器主动将这些信息通过LSU封装后转发给其他路由器 链路状态确认(LSAck) 确认收到了邻居路由器的

1.7K1 0

初识ABP vNext（3）：vue对接ABP基本思路

开始我使用vue-element-admin[1]来作为模板，这个项目貌似很多人用，选择他的i18n[2]分支，因为我需要国际化功能。...ABP内置了一个/api/abp/application-configuration接口，它用于返回本地化文本，权限和一些系统设置信息。看一下数据格式： ?...步骤比较多，具体流程请参考官网：数据库迁移[5]，这里就不重复介绍了，你也可以选择不分库。完成以上步骤，最终会生成2个数据库，并且包含了一些默认的种子数据。 ?...代码已上传至GitHub：https://github.com/xiajingren/HelloAbp，欢迎star。...#使用多个数据库 [6]i18n: https://github.com/PanJiaChen/vue-element-admin/tree/i18n

2.7K5 0

路由协议——RIP、OSPF协议

此时R2路由器更新计时器先超时，R2将自己的路由信息发送给R1，R1就从R2处又学习到了网1的路由信息，并且将距离设置成2。此时，R1 的路由表已经出现了错误，但路由器并不知道。...路由中毒和毒性逆转应该是两个独立的过程路由中毒就是当siwtch上的某个子网失效时，它会把这个子网的metric设置为16公告给其它switch，意味着这个子网不可达....，又会更新自己的路由表然后通知R1和R3，以此循环至metric变为16路由才会被删除。...与距离矢量路由不同，距离矢量路由中交换的是完整的路由表，这样如果有人恶意攻击的话，就能够知道整个网络拓扑结构。而链路状态路由则交换链路的状态，用户无法通过这个清晰的得知整个链路拓扑。...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

6.6K2 0

IP协议详解

8位生存时间(TimeToLive,TTL)是数据报到达目的地之前允许经过的路由器跳数。TTL值被发送端设置(常见的值是64)。数据报在转发过程中每经过一个路由，该值就被路由器减1。...如果该IP数据报的头部设置了源站选路选项(松散源路由选择或严格源路由选择),则IP模块调用数据报转发子模块来处理该数据报。...查看数据报头部的严格源路由选择选项。如果该选项被设置，则检测数据报的目标IP地址是否是本机的某个IP地址。如果不是，则发送-一个ICMP源站选路失败报文给发送端。...如果有必要，则给源端发送一个ICMP重定向报文，以告诉它-一个更合理的下一跳路由器。将TTL值减1。处理IP头部选项。如果有必要，则执行IP分片操作。 重定向 ?...ICMP重定向报文的数据部分含义很明确，它给接收方提供了如下两个信息: 引起重定向的IP数据报(即图2-4中的原始IP数据报)的源端IP地址。应该使用的路由器的IP地址。

8981 0

vue之router文档

$route.params 对象，包含路由中的动态片段和全匹配片段的键值对，详情见后文 $route.query 对象，包含路由中查询参数的键值对。例如，对于 /foo?...路由选项当创建路由器实例时，可以使用以下参数自定义路由器的行为。...如果组件可以重用，它的 data 钩子在激活阶段仍然会被调用。 路由器实例属性这里只列出了公开属性 router.app 类型: Vue 此路由器管理的根 Vue 实例。...路径不能以 / 开头，会以相对于当前路径的方式进行解析。 router.redirect(redirectMap) 为路由器定义全局的重定向规则。全局的重定向会在匹配当前路径之前执行。.../:userId': '/profile/:userId', // 重定向任意未匹配路径到 /home '*': '/home' }) router.alias(aliasMap) 为路由器配置全局的别名规则

5.4K3 0

Vue项目实战05：18n实现多语言自动切换-浏览器语言设置「建议收藏」

什么是vue-i18n i18n是 Internationalization 这个英文的简写，即国际化的意思，vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换，以适应不同地区用户的需求...安装vue-i18n 直接在项目中执行安装命令：npm install vue-i18n --save 全局引入vue-i18n 在项目中引入vue-i18n，实例化vue-i18n将需要加载的语言包通过...require导入，这里看个人需求我只需要中英日文，所以引入zh-CN.js和en-US.js ja-JP.js，分别对应中文和英文日文，你也可以提供多语言包，最后别忘记了将实例挂载至Vue。...步骤 1.在src下新建locale文件夹在locale下建lang文件夹—-用来存放自己设置的多语言文件 index.js 入口文件 index.js里放置内容如下 import Vue...from '@/locale' Vue.use(i18n) new Vue({ router, i18n, // 挂载 render: h => h(App) }).

2.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭