Vue中Route切换-动态路由 ｜ children 嵌套路由

本文主要是介绍Vue中Route切换-动态路由 ｜ children 嵌套路由，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

带参数的动态路由匹配 | Vue Router (vuejs.org)

<template><!-- <router-view></router-view> --><component v-if="isShow" :is="routerList[routerType]"></component></template><script setup>
import { ref, onMounted, computed, watch } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
import { useRouter } from 'vue-router';
const route = useRouter();
const routerParams = computed(() => route.currentRoute.value.params);
const isShow = ref(false);
import marketoverview from '@/views/Prices/MarketOverview.vue';
import position from '@/views/Prices/Position.vue';
import fundrate from '@/views/Prices/FundRate.vue';
const routerList = {marketoverview: marketoverview,position: position,fundrate: fundrate
};
const routerType = ref();
watch(routerParams,(val) => {console.log('routerParams', val);isShow.value = false;const { type } = routerParams.value;routerType.value = type;setTimeout(() => {isShow.value = true;window.scrollTo(0, 0);}, 0);},{immediate: true}
);
</script>

路由表配置

{path: '/prices/:type',name: 'prices',component: () => import('@/views/Prices/index.vue'),meta: {}
}

---

嵌套路由 | Vue Router (vuejs.org)

<template><router-view></router-view>
</template><script setup>
import { ref, onMounted } from 'vue';
import { useStore } from 'vuex';
const store = useStore();</script>

路由表配置

{path: '/prices',name: 'prices',component: () => import('@/views/Prices/index.vue'),meta: {},redirect: '/prices/marketoverview',children: [{path: '/prices/marketoverview',name: 'marketoverview',component: () => import('@/views/Prices/MarketOverview.vue'),meta: { pathName: 'prices' }},{path: '/prices/position',name: 'position',component: () => import('@/views/Prices/Position.vue'),meta: { pathName: 'prices' }},{path: '/prices/fundrate',name: 'fundrate',component: () => import('@/views/Prices/FundRate.vue'),meta: { pathName: 'prices' }},]}

页面路由匹配

<router-linkclass="content":class="{actived:nav.name === $route.name || $route.meta?.pathName === nav.name}":to="nav.path"v-for="nav in navList":key="nav.name">
{{ nav.label }}
</router-link>

这篇关于Vue中Route切换-动态路由 ｜ children 嵌套路由的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---