关于 Vuetify 与nuxt_i18n组件共用
VoidWh 2021-02-02
Vuetify
Nuxt.js
i18n
踩过的坑
# nuxt_i18n模块
nuxt_i18n模块 使用时,会自动在地址根路径追加相应的语言路由 以中英文语言为例,以下的路由
pages/
├── index.vue
├── about.vue
1
2
3
2
3
会被nuxt_18n解析成为
[
{
path: "/",
component: _3237362a,
name: "index___en"
},
{
path: "/zh/",
component: _3237362a,
name: "index___zh"
},
{
path: "/about",
component: _71a6ebb4,
name: "about___en"
},
{
path: "/zh/about",
component: _71a6ebb4,
name: "about___zh"
}
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
而 vuetify 在匹配路由地址时,如果不使用非精准模式匹配,在非默认语言切换路由时, 总是会自动匹配到相应的语言路由,导致路由激活的样式发生错误 比如在中文环境下,跳转到 index 页面, 实际跳转路径为 '/zh/',而跳转到 about 页面时,匹配的是 /zh/about/, 对于路由切换的按钮来说,在 about 页面时, '/zh/' 路由总是会被激活的
为了解决这个问题,我查阅了vuetify 的按钮组件的文档,发现如果按钮是route-link 的话,也继承 vue-router 的 extra
“是否激活”默认类名的依据是包含匹配。 举个例子,如果当前的路径是
/a
开头的,那么<router-link to="/a">
也会被设置 CSS 类名。 按照这个规则,每个路由都会激活<router-link to="/">
!想要链接使用“精确匹配模式”,则使用exact
属性
添加 extra 属性后,问题解决 🤣