【Vue3】配置路由规则props

【Vue3】配置路由规则props

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍 Vue3 路由规则中 props 配置的用法。

开发环境

分类 名称 版本
操作系统 Windows Windows 11
IDE Visual Studio Code 1.91.1

开发步骤及源码

1> 在 【Vue3】路由Params传参 基础上修改 src/pages/Warn.vue,将测试数据中的 / 替换成 -,避免影响 URL 解析。

<template>
    <div class="warn">
        <div class="timeline">
            <h3>告警发生时间</h3>
            <ul>
                <li v-for="warn in warns" :key="warn.id">
                    <RouterLink 
                        :to="`/system/warn/detail/${warn.time}/${warn.level}/${warn.msg}`"
                    >
                        {{ warn.time }}
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="warn-detail">
            <RouterView />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'

const warns = reactive([
    { "id": 9, "time": "2024-08-16 19:45:35", "msg": "服务XX升级失败回退", "level": 1 },
    { "id": 8, "time": "2024-08-15 23:58:41", "msg": "服务XXCPU占用率超警戒值", "level": 2 },
    { "id": 7, "time": "2024-08-15 20:10:00", "msg": "缓存使用量超警戒值XX", "level": 2 },
    { "id": 6, "time": "2024-08-15 17:42:08", "msg": "服务XX无法恢复", "level": 1 },
    { "id": 5, "time": "2024-08-15 15:14:39", "msg": "服务XX异常重启", "level": 2 },
    { "id": 4, "time": "2024-08-13 01:05:17", "msg": "请求处理失败数超阈值XX", "level": 2 },
    { "id": 3, "time": "2024-08-12 22:31:26", "msg": "服务XX持续上报告警", "level": 4 },
    { "id": 2, "time": "2024-08-12 14:22:54", "msg": "消息队列积压XX", "level": 3 },
    { "id": 1, "time": "2024-08-10 10:01:01", "msg": "请求处理平均时延超警戒值XX", "level": 2 }
])
</script>

<style scoped lang="scss">
.warn {
    .timeline, .warn-detail {
        height: 420px;
        li {
            line-height: 35px;
        }
    }
    .timeline {
        border-right: 1px solid #aaa;
        width: 37%;
        float: left;
    }
    .warn-detail {
        width: 60%;
        float: right;
    }
}
</style>

2> 修改 src/router/index.tsSystemWarnDetail/system/warn/detail 的路由配置,添加 props: true

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import Log from '@/pages/Log.vue'
import Permission from '@/pages/Permission.vue'
import Warn from '@/pages/Warn.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'
import WarnDetail from '@/pages/WarnDetail.vue'

const router = createRouter({
    // 路由器工作模式
    history: createWebHistory(),
    routes: [
        {
            path: '/dashboard',
            component: Dashboard
        },
        {
            path: '/system',
            component: System,
            children: [
                {
                    name: 'SystemPermission',
                    path: 'permission',
                    component: Permission
                },
                {
                    name: 'SystemLog',
                    path: 'log',
                    component: Log
                },
                {
                    name: 'SystemWarn',
                    path: 'warn',
                    component: Warn,
                    children: [
                        {
                            name: 'SystemWarnDetail',
                            path: 'detail/:time/:level/:msg',
                            component: WarnDetail,
                            props: true
                        }
                    ]
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router

3> 修改 src/pages/WarnDetail.vue,使用 defineProps 函数接收路由传参。

<template>
    <div class="detail">
        <h3>告警详情</h3>
        <div>上报时间:{{ time }}</div>
        <div>
            告警级别:
            <span v-if="level == '1'" class="warn-level warn-level-1">一级</span>
            <span v-else-if="level == '2'" class="warn-level warn-level-2">二级</span>
            <span v-else-if="level == '3'" class="warn-level warn-level-3">三级</span>
            <span v-else-if="level == '4'" class="warn-level warn-level-4">四级</span>
        </div>
        <div>告警信息:{{ msg }}</div>
    </div>    
</template>

<script setup lang="ts">
defineProps(['time', 'level', 'msg'])
</script>

<style scoped lang="scss">
.detail {
    padding: 0 10px;
    div {
        min-height: 30px;
        line-height: 30px;
        .warn-level-1 {
            color: red;
        }
        .warn-level-2 {
            color: orange;
        }
        .warn-level-3 {
            color: yellow;
        }
        .warn-level-4 {
            color: blue;
        }
    }
}
</style>

4> 执行命令 npm run dev 启动应用,浏览器访问:http://localhost:5173/,点击左侧菜单进入 系统管理 页面,点击顶部 告警 按钮进入告警页面,点击告警页面左侧 告警发生时间 查看右侧的 告警详情,已成功显示路由传递的参数。

5> 以上是路由规则 props 配置的第一种写法,用于处理路由传递的 params 参数,如果路由传递的是 query 参数,则需使用 props 配置的第二种写法,即函数式写法。修改 src/router/index.tsSystemWarnDetail/system/warn/detail 的路由配置。

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import Log from '@/pages/Log.vue'
import Permission from '@/pages/Permission.vue'
import Warn from '@/pages/Warn.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'
import WarnDetail from '@/pages/WarnDetail.vue'

const router = createRouter({
    // 路由器工作模式
    history: createWebHistory(),
    routes: [
        {
            path: '/dashboard',
            component: Dashboard
        },
        {
            path: '/system',
            component: System,
            children: [
                {
                    name: 'SystemPermission',
                    path: 'permission',
                    component: Permission
                },
                {
                    name: 'SystemLog',
                    path: 'log',
                    component: Log
                },
                {
                    name: 'SystemWarn',
                    path: 'warn',
                    component: Warn,
                    children: [
                        {
                            name: 'SystemWarnDetail',
                            path: 'detail',
                            component: WarnDetail,
                            props(route) {
                                return route.query
                            }
                        }
                    ]
                }
            ]
        },
        {
            path: '/about',
            component: About
        }
    ]
})

export default router

6> 修改 src/pages/Warn.vue,使用路由 query 传参。

<template>
    <div class="warn">
        <div class="timeline">
            <h3>告警发生时间</h3>
            <ul>
                <li v-for="warn in warns" :key="warn.id">
                    <RouterLink :to="`/system/warn/detail?time=${warn.time}&msg=${warn.msg}&level=${warn.level}`">
                        {{ warn.time }}
                    </RouterLink>
                </li>
            </ul>
        </div>
        <div class="warn-detail">
            <RouterView />
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterLink, RouterView } from 'vue-router'

const warns = reactive([
    { "id": 9, "time": "2024-08-16 19:45:35", "msg": "服务XX升级失败回退", "level": 1 },
    { "id": 8, "time": "2024-08-15 23:58:41", "msg": "服务XXCPU占用率超警戒值", "level": 2 },
    { "id": 7, "time": "2024-08-15 20:10:00", "msg": "缓存使用量超警戒值XX", "level": 2 },
    { "id": 6, "time": "2024-08-15 17:42:08", "msg": "服务XX无法恢复", "level": 1 },
    { "id": 5, "time": "2024-08-15 15:14:39", "msg": "服务XX异常重启", "level": 2 },
    { "id": 4, "time": "2024-08-13 01:05:17", "msg": "请求处理失败数超阈值XX", "level": 2 },
    { "id": 3, "time": "2024-08-12 22:31:26", "msg": "服务XX持续上报告警", "level": 4 },
    { "id": 2, "time": "2024-08-12 14:22:54", "msg": "消息队列积压XX", "level": 3 },
    { "id": 1, "time": "2024-08-10 10:01:01", "msg": "请求处理平均时延超警戒值XX", "level": 2 }
])
</script>

<style scoped lang="scss">
.warn {
    .timeline, .warn-detail {
        height: 420px;
        li {
            line-height: 35px;
        }
    }
    .timeline {
        border-right: 1px solid #aaa;
        width: 37%;
        float: left;
    }
    .warn-detail {
        width: 60%;
        float: right;
    }
}
</style>

7> 浏览器刷新访问:http://localhost:5173/,路由传参效果与之前一致。

8> 路由规则 props 配置还有第三种对象写法,用于传递固定参数值,以下是配置代码片段示例。

props: {
    a: 100,
    b: 200,
    c: 300
}

总结

路由规则 props 配置有三种写法:

  1. props: true:用于处理 params 传参;
  2. props(route) { return ... },函数写法:
    • return route.query:处理 query 传参;
    • return route.params:处理 params 传参。
  3. props: {}:对象写法,用于传递固定参数值。
相关推荐
Yaml47 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf10 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
qq_3643717216 小时前
VueRouter 导航故障问题
javascript·vue.js·前端框架·vue-router
CherishTaoTao1 天前
Vue3 keep-alive核心源码的解析
前端·vue3
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
用户8185216881172 天前
Vue-Router源码实现详解
vue-router
你白勺男孩TT3 天前
Vue项目中点击按钮后浏览器屏幕变黑,再次点击恢复的解决方法
vue.js·vue·springboot