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

第一模块

课程名称：vue3.0实现todolist

章节名称：

• 4-3 介绍路由传参

讲师姓名：五月的夏天

第二模块

课程内容(概述)

1、讲解如何实现路由传递参数，useRouter，useRoute、query、params的区别以及如果使用

第三模块

介绍

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

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

query使用path和name都可以，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
}

第四模块

学习截图