JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-06-17 00:09:16 +08:00
Code Issues Projects Releases Wiki Activity

fix: 解决路由跳转tabbar的问题

Browse Source
This commit is contained in:
fonghehe 2022-08-01 18:25:52 +08:00
parent 009dd87e88
commit 70f6e8be71
2 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/i18n/index.ts
View File

@ -21,6 +21,11 @@ export const i18n = createI18n({
export const i18nt = i18n.global.t; export const i18nt = i18n.global.t;
export function setLang(locale: string) { export function setLang(locale?: string) {
i18n.global.locale = locale; if (locale) {
localStorage.setItem('lang', locale);
}
i18n.global.locale = locale || localStorage.getItem('lang') || '';
} }
setLang();

22
src/layout/basic/index.vue
View File

@ -12,23 +12,34 @@
</RouterView> </RouterView>
<RouterView v-if="!$route.meta.keepAlive" :key="$route.path" /> --> <RouterView v-if="!$route.meta.keepAlive" :key="$route.path" /> -->
</div> </div>
<nut-tabbar unactive-color="#364636" active-color="#1989fa" @tab-switch="tabSwitch" bottom> <nut-tabbar unactive-color="#364636" active-color="#1989fa" @tab-switch="tabSwitch" bottom v-model:visible="activeTab">
<nut-tabbar-item :tab-title="$t('tabbar.home')" icon="home" /> <nut-tabbar-item v-for="item in tabItem" :key="item" :tab-title="$t(`tabbar.${item.key}`)" :icon="item.icon" />
<nut-tabbar-item :tab-title="$t('tabbar.list')" icon="horizontal" />
<nut-tabbar-item :tab-title="$t('tabbar.member')" icon="my" />
<nut-tabbar-item :tab-title="$t('tabbar.demo')" icon="location" />
</nut-tabbar> </nut-tabbar>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
const tabItem = [
{ key: 'home', icon: 'home' },
{ key: 'list', icon: 'horizontal' },
{ key: 'member', icon: 'my' },
{ key: 'demo', icon: 'location' },
];
const router = useRouter(); const router = useRouter();
const activeTab = ref(0);
onMounted(() => {
activeTab.value = tabItem.findIndex((item) => item.key === router.currentRoute.value.path.replace('/', ''));
});
const tabSwitch = (_item, index) => { const tabSwitch = (_item, index) => {
switch (index) { switch (index) {
case 0: case 0:
router.push('/home'); router.push('/home');
break; break;
case 1: case 1:
router.push('/list'); router.push('/list');
@ -39,6 +50,7 @@
case 3: case 3:
router.push('/demo'); router.push('/demo');
} }
activeTab.value = index;
}; };
</script> </script>