为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第16天-vue3.0实现todolist

【金秋打卡】第16天-vue3.0实现todolist

2022.11.10 00:13 87浏览

第一模块

课程名称:vue3.0实现todolist

章节名称:

  • 4-3 介绍路由传参

讲师姓名:五月的夏天

第二模块

课程内容(概述)

1、讲解如何实现路由传递参数,useRouteruseRoutequeryparams的区别以及如果使用

第三模块

介绍

vue3 中的传参方式和vue2中一样,都可以用query和params传参。对比vue2vue2 中是有this的,vue3是在setup中进行的,且要引入useRouteuseRouter

query传递过来的都是字符串类型,会在地址栏上显示;params传递的参数不会在地址栏中显示,刷新会丢失

query使用pathname都可以,params只能使用name

配置

修改views目录下的About.vue文件

<template>
    <div>
        --------------------------
        About页面--这是query传递的参数:{{ pid }}
        <button type="button" @click="onRet">返回上一页</button>
        --------------------------
    </div>
</template>
<script>
import { defineComponent, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
    name: 'About',
    setup() {
        const pid = ref(null)
        // 全局路由对象
        const router = useRouter()
        // 当前路由对象
        const route = useRoute()

        // 接收路由参数pid--query方式
        // pid.value = route.query.pid
        // 接收路由参数pid--params方式
        pid.value = route.params.pid

        const onRet = () => {
            router.back()
        }
        return {
            pid,
            onRet
        }
    }
})
</script>

问题

使用params方式传参报错Discarded invalid param(s) “pid“ when navigating

路由文件需要配置上形参pid

// router/index.js
{
  	path: '/about/:pid',
	name: 'About',
	component: About
}

第四模块

学习截图
图片描述
图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
学生
手记
粉丝
1
获赞与收藏
0

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消