Pinia+Router学习笔记(十)

简介: 本节记录Vue-Router的两种路由传参方式

第一种传参方式:query

<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>


<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
      // 这里可以使path也可以是name
        path:'/reg',
      // 利用query传递参数
        query: item,
    })
}
</script>


<style scoped></style>

特点:传递的参数会显示在地址栏上,不会随网页刷新发生变化

<template>
    <div>{{ route.query.name }}</div>
    <div>{{ route.query.price }}</div>
    <div>{{ route.query.id }}</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRoute } from 'vue-router'
const route = useRoute()
</script>

<style scoped></style>

第二种传参方式:params

由于笔者在尝试不做动态路由匹配,直接传递params参数时发现参数并不能正确传递(跳转过去就没了),因此此处直接进入动态路由匹配环节

params传参方式允许将参数保存在内存中,但由于刷新会导致参数消失,因此需要在路由配置中使用:占位符提前指定参数列表

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'Login',
        component: () => import('../components/login.vue'),
    },
    {
    // 使用/:参数名来定义参数列表
        path: '/reg/:id/:price',
        name: 'Reg',
        component: () => import('../components/reg.vue'),
    },
]

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

export default router
<template>
    <h1>小满最骚</h1>
    <router-link replace to="/reg">点击replace</router-link>
    <router-link to="/login">返回Login</router-link>
    <br />
    <button @click="toPage(item)">Reg</button>
    <router-view></router-view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const item: Item = {
    name: 'Reg',
    price: 666,
    id: '001',
}
type Item = {
    name: string
    price: number
    id: string
}
const toPage = (item: Item) => {
    router.push({
    // 若要使用params传参方式则这里必须使用name,params对象的key要和router那边一一对应
        name: 'Reg',
        params: {
            id: item.id,
            price: item.price,
        },
    })
}
</script>

<style scoped></style>

注意两点:

  1. 对于编程式路由导航,params传参方式只能使用name属性跳转
  2. params参数中的key要和router中预定义的参数名对应

最后:如果使用+params传参的方式,则to中的url必须附带正确的参数数量

<!-- 本例中/reg是path路径,/0/0分别对应id和price -->
<router-link replace to="/reg/0/0">点击replace</router-link>
相关文章
|
9月前
|
机器学习/深度学习 人工智能 自然语言处理
三行代码实现实时语音转文本,支持自动断句和语音唤醒,用 RealtimeSTT 轻松创建高效语音 AI 助手
RealtimeSTT 是一款开源的实时语音转文本库,支持低延迟应用,具备语音活动检测、唤醒词激活等功能,适用于语音助手、实时字幕等场景。
1951 18
三行代码实现实时语音转文本,支持自动断句和语音唤醒,用 RealtimeSTT 轻松创建高效语音 AI 助手
|
10月前
|
Ubuntu Shell Linux
pyenv 管理多个 Python 版本(1)
pyenv 管理多个 Python 版本(1)
395 86
pyenv 管理多个 Python 版本(1)
|
7月前
|
移动开发 前端开发 UED
React 音频进度条组件 Audio Progress Bar
在现代Web开发中,音频播放功能不可或缺。使用React构建音频进度条组件,不仅能实现播放控制和拖动跳转,还能确保代码的可维护性和复用性。本文介绍了如何利用HTML5 `&lt;audio&gt;`标签的基础功能、解决获取音频时长和当前时间的问题、动态更新进度条样式,并避免常见错误如忘记移除事件监听器和忽略跨浏览器兼容性。通过这些方法,开发者可以打造高质量的音频播放器,提升用户体验。
217 6
|
11月前
|
机器学习/深度学习 算法 大数据
大数据中缺失值处理
【10月更文挑战第20天】
737 4
|
12月前
|
Kubernetes 持续交付 Docker
探索DevOps实践:利用Docker与Kubernetes实现微服务架构的自动化部署
【10月更文挑战第18天】探索DevOps实践:利用Docker与Kubernetes实现微服务架构的自动化部署
264 2
|
存储 运维 网络协议
穿越网络界限:探索NAT IPv4的神秘面纱
穿越网络界限:探索NAT IPv4的神秘面纱
329 1
|
机器学习/深度学习 边缘计算 人工智能
ONNX 在边缘计算中的应用
【8月更文第27天】随着物联网 (IoT) 和边缘计算技术的不断发展,越来越多的智能设备被部署在远离数据中心的位置,以处理实时数据并做出即时决策。Open Neural Network Exchange (ONNX) 作为一种开放格式,允许在不同框架之间交换经过训练的机器学习模型,为边缘计算中的模型部署提供了重要的支持。本文将探讨 ONNX 如何简化边缘计算中复杂 AI 模型的部署,并讨论在此过程中可能遇到的挑战及解决方案。
527 0
|
关系型数据库 MySQL 数据库
MySQL数据库基础第四篇(多表查询与事务)
MySQL数据库基础第四篇(多表查询与事务)
|
算法 Java
[Java·算法·中等] LeetCode21. 合并两个有序链表
[Java·算法·中等] LeetCode21. 合并两个有序链表
205 2
|
存储 缓存 JavaScript
pinia中文文档 & 指导文档中文翻译版 & & pinia指导中文翻译
pinia中文文档 & 指导文档中文翻译版 & & pinia指导中文翻译
537 1