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

2024-04-15 13:52

本文主要是介绍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 嵌套路由的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/905995

相关文章

一文详解SpringBoot中控制器的动态注册与卸载

《一文详解SpringBoot中控制器的动态注册与卸载》在项目开发中,通过动态注册和卸载控制器功能,可以根据业务场景和项目需要实现功能的动态增加、删除,提高系统的灵活性和可扩展性,下面我们就来看看Sp... 目录项目结构1. 创建 Spring Boot 启动类2. 创建一个测试控制器3. 创建动态控制器注

Python中将嵌套列表扁平化的多种实现方法

《Python中将嵌套列表扁平化的多种实现方法》在Python编程中,我们常常会遇到需要将嵌套列表(即列表中包含列表)转换为一个一维的扁平列表的需求,本文将给大家介绍了多种实现这一目标的方法,需要的朋... 目录python中将嵌套列表扁平化的方法技术背景实现步骤1. 使用嵌套列表推导式2. 使用itert

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

springboot如何通过http动态操作xxl-job任务

《springboot如何通过http动态操作xxl-job任务》:本文主要介绍springboot如何通过http动态操作xxl-job任务的问题,具有很好的参考价值,希望对大家有所帮助,如有错... 目录springboot通过http动态操作xxl-job任务一、maven依赖二、配置文件三、xxl-

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》:本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载(1)下载地址(2)系统选择(3)版本选择2、安装部署(1)解压(2)配置文件修改(3)启动(4)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化(seo)三、社交媒体集成四、移动

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入,随type属性值的不同,变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签,感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》:本文主要介绍了HTML中img标签的使用,包括src属性(指定图片路径)、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等,详细内容请阅读本文,希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性,感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.

HTML5 中的<button>标签用法和特征

《HTML5中的<button>标签用法和特征》在HTML5中,button标签用于定义一个可点击的按钮,它是创建交互式网页的重要元素之一,本文将深入解析HTML5中的button标签,详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled