vue动态添加store、路由和国际化配置

周晓风

已于 2022-02-19 18:21:46 修改

阅读量2.2k

点赞数

分类专栏： VUE 文章标签： vue

于 2020-07-18 14:15:19 首次发布

本文链接：https://blog.csdn.net/u011140116/article/details/107427932

版权

VUE 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1. vue动态添加store
2. vue动态添加路由
3. vue动态加载国际化

1. vue动态添加store

想写组件库？用这个吧 …

// store module标准格式
import demo from '@/store/modules/demo'

$store.registerModule('demo', demo)

2. vue动态添加路由

从后端加载路由不再是梦 …

// 路由数组标准格式
import routerArray from '@/router/routerArray'

$router.addRoutes(routerArray)

// 不加这个可以跳转，但是options里面没有新加的信息
$router.options.routes.push(...routerArray)

$router.beforeEach
$router.beforeResolve
$router.afterEach
$router.beforeHooks  // 数组
$router.afterHooks  // 数组
用这些修改全局路由守卫及守卫顺序

3. vue动态加载国际化

从后端加载国际化，so easy …

$i18n.setLocaleMessage('zh_CN', messageObject)
// or
$i18n.mergeLocaleMessage('zh_CN', messageObject)

优惠劵

周晓风

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue动态添加store、路由和国际化配置

vue动态添加store、路由和国际化配置想写公共能力？用这个吧 ...从后端加载路由不再是梦 ...从后端加载国际化，so easy ...
复制链接

扫一扫

专栏目录

PHPixie-Amalgama:PHPixie 国际化库

07-08

PHPixie 的国际化模块使用简单默认语言的 url 中没有 lang 参数翻译中的参数自动路由修改设置在composer.json 的“require”部分定义这个包 " phpixie/amalgama " : " 2.*@dev " 更新包 php composer.phar update -o --prefer-dist 在/assets/config/amalgama.php下添加一个配置文件 return array ( // The list of languages 'list' => array ( 'en' , 'ru' , 'kk' ), // Default language 'default' => 'en' , // For using autorouting extension 'autorouting' =>

Add-Store_x64_16299.rar

04-12

打开amd64文件夹，右键点击Add-Store.cmd 以管理员身份运行，依次出现添加应用商店、添加桌面安装程序、添加商店购买等，直到出现完成两个字即可

参与评论您还未登录，请先登录后发表或查看评论

gatsby-plugin-intl：Gatsby插件，可将您的网站立即变成国际化框架

02-04

gatsby-plugin-intl 使您的Gatsby网站国际化。产品特点将您的gatsby网站变成由支持的开箱即用的国际化框架。在提供的支持基于用户首选语言的自动重定向。在单个页面组件中支持多语言URL路由。这意味着您不必创建单独的页面，例如pages/en/index.js或pages/ko/index.js 。为什么？当您建立多语言网站时，Google建议为页面的每种语言版本使用不同的URL，而不是使用Cookie或浏览器设置来调整页面上的内容语言。初学者演示：：来源： : 展示柜随时向我们发送PR以添加您的项目。

vue3.0+element-plus实现国际化语言，动态路由菜单demo

01-27

vue3.0+element-plus实现国际化语言，动态路由菜单demo

Add-Store.7z

01-23

我自己装的windows10专业版，但是没有应用商店以及照相机等等一系列应用，经过反复折腾终于成功了，附上自己的方法以及安装包。下载解压后打开add-store文件夹，以管理员身份打开add-store.cmd

Vue-i18n在Routerd动态路由下实现国际化

雪漠山堂

08-02

3287

在Electron-vue-admin的项目中实现国际化的需求时，遇到一个问题，vue-i8n无法在router/index.js的路由菜单配置项内以下面常规的方法实现。在router中实现国际化，router和i18n是同级的，所以在router中调用this.$t()会报错。2.在router路由文件夹下的js配置文件内，对应菜单的title位置写入国际化翻译对应的key。重点注意的是title位置的key需要单引号，便于动态路由页面加载时查找和实时翻译。...

Vue使用Vuex一步步封装并使用store

GeniusXYT的博客

05-12

8787

文章目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库（下一步创建）2. this.$store3. this.$store.state4. this.\$store.getters（this.\$store.state的升级）5. this.$store.commit('mutations')6. this.\$store.dispatch('actions')（this.\$store.commit('mutations')的升级）三、modules 模块化四、

五步完美解决vue项目国际化问题

进阶之路

03-30

6896

vue-element-admin后台管理项目国际化问题第一步安装118n模块第二步配置main.js文件第三步封装组件，用来切换语言第四步配置zh包和en包文件第五步配置路由文件第一步安装118n模块 //安装118n模块 npm install vue-i18n --save 第二步配置main.js文件 //在入口文件，main.js中引入vue-i18n模块，并使用 import VueI18n from "vue-i18n"; Vue.usse(VueI18n); //通过

Vue3后台管理系统（六）i18n国际化

热门推荐

Good Luck

02-21

1万+

Vue3后台管理系统（六）i18n国际

Vue实现国际化处理

oooosadas的博客

07-10

299

2：在将我们所有需要却换内容的地方 国际化获取到动态的数据 {{ $t(表中对应的内容)}}}3：在通过 useI18n 这个方法返回对象中的数据 locale.value 改变语言。1：将我们项目中的所有需要切换语言内容存放到语言包中。这样我们就可以在组件中使用国际化了。总结： 国际化的本质查表的思想。在到mian.ts中注册插件。1 获取 =>{{$t(

Vue路由模块化配置的完整步骤

12-11

分享两个解决方案 —— Vue 路由配置的模块化（Plan A and Plan B）注册需要首先路由注册需要啥 // main.js new Vue({ el: '#app', router, store, components: { App }, template: '<App>' }) // 这里的 ...

vue2的路由和store的应用，非常的详细

08-21

vue2的路由和store的应用，非常的详细 vue2的路由和store的应用，非常的详细 vue2的路由和store的应用，非常的详细 vue2的路由和store的应用，非常的详细 vue2的路由和store的应用，非常的详细 vue2的路由和store的...

前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由

08-15

VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...

vue-router+vuex addRoutes实现路由动态加载及菜单动态加载

08-29

本篇文章主要介绍了vue-router+vuex addRoutes实现路由动态加载及菜单动态加载，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

在Vue中使用this.$store或者是$route一直报错的解决

10-16

今天小编就为大家分享一篇在Vue中使用this.$store或者是$route一直报错的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

大学物理册答案上下都有

04-26

大学物理册答案上下都有

UWB超宽带信道研究及源码.zip

04-26

1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

Suno AI语音技术的资源描述

04-26

Suno AI 是一家领先的人工智能（AI）公司，专注于开发创新的语音技术和解决方案。以下是关于 Suno AI 的资源描述：语音识别技术：Suno AI 拥有先进的语音识别技术，能够准确地将语音转换为文本。他们的语音识别系统经过了大量的训练和优化，具有高度的准确性和鲁棒性，可应用于多种场景，如语音助手、语音搜索、智能客服等。语音合成技术：除了语音识别，Suno AI 还致力于开发自然、流畅的语音合成技术。他们的语音合成系统能够生成高质量、逼真的语音输出，可以用于语音助手、自动化客服、有声书等领域。智能语音应用开发：Suno AI 提供了一系列工具和平台，帮助开发者快速构建和部署智能语音应用。他们的开发工具包括 API 接口、SDK、开发文档等，支持多种编程语言和平台，让开发者可以轻松地集成语音功能到自己的应用中。行业解决方案：Suno AI 为各行各业提供定制化的语音解决方案，满足客户特定的需求和业务场景。他们与零售、金融、医疗等领域的企业合作，提供智能语音客服、语音导航、语音支付等解决方案，帮助客户提升服务质量和效率。

基于matlab的射线信道模型内含数据集.zip

最新发布

04-26

基于matlab的射线信道模型内含数据集.zip

使用vue3 + ts + element-plus + axios + router + Pinia + vite编译 1、动态生成路由，模块化管理 2、支持国际化 3、支持换肤并且打包zip下载

05-23

对于动态生成路由，你可以使用 Vue Router 的 addRoutes 方法动态添加路由。具体实现可以参考以下代码： ```typescript // 路由配置 const routes: RouteRecordRaw[] = [ { path: '/login', component: () => import('@/views/Login.vue') }, { path: '/', component: () => import('@/views/Home.vue'), children: [ { path: '/dashboard', component: () => import('@/views/Dashboard.vue') } // 其他路由 ] } ] // 创建 router 实例 const router = createRouter({ history: createWebHashHistory(), routes }) // 在登录成功后动态添加路由 router.addRoute({ path: '/user', component: () => import('@/views/User.vue') }) ``` 对于模块化管理，你可以将页面和组件按照功能模块拆分到不同的文件夹中，并使用 Vue 的异步组件实现按需加载。如下所示： ```vue  { path: '/dashboard', component: () => import('@/views/dashboard/Dashboard.vue') }  <template>  </template> <script> export default { // ... } </script> <style scoped> /* Dashboard 页面样式 */ </style> ``` 对于国际化，你可以使用 Vue I18n 插件来实现。首先需要安装和配置该插件，然后在页面中使用 `$t` 方法来访问翻译文本，如下所示： ```vue  <template> <div> {{ $t('hello') }} </div> </template> <script> export default { // ... } </script> ``` 对于换肤，你可以使用 CSS 变量来实现。首先在全局样式表中定义一些颜色变量，然后在页面中使用这些变量，如下所示： ```css /* 在全局样式表中 */ :root { --primary-color: #42b983; --secondary-color: #ff7f50; } /* 在组件样式表中 */ .button { background-color: var(--primary-color); color: white; } .button:hover { background-color: var(--secondary-color); } ``` 对于打包 zip 下载，你可以使用 JSZip 库来实现。具体实现可以参考以下代码： ```typescript import JSZip from 'jszip' import FileSaver from 'file-saver' // 创建 zip 文件 const zip = new JSZip() // 将需要打包的文件添加到 zip 文件中 zip.file('index.html', '<html><body>Hello World!</body></html>') // 生成 zip 文件并下载 zip.generateAsync({ type: 'blob' }).then((content) => { FileSaver.saveAs(content, 'example.zip') }) ``` 以上是使用 Vue3 + TypeScript + Element Plus + Axios + Router + Pinia + Vite 实现动态生成路由、模块化管理、国际化、换肤和打包 zip 下载的简要方案。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交