亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【金秋打卡】第16天-vue3.0實現todolist

第一模块

课程名称: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
}

第四模块

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

點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消