vue路由傳參的三種基本方式 - 流年的櫻花逝 - SegmentFault 思否

現有如下場景,點擊父組件的li元素跳轉到子組件中,并攜帶參數,便于子組件獲取數據。
父組件中:

<li v-for="article in articles"?@click="getDescribe(article.id)">

methods:

方案一:

      getDescribe(id) {
//   直接調用$router.push 實現攜帶參數的跳轉this.$router.push({path: `/describe/${id}`,})

方案一,需要對應路由配置如下:

   {path: '/describe/:id',name: 'Describe',component: Describe}

很顯然,需要在path中添加/:id來對應 $router.push 中path攜帶的參數。在子組件中可以使用來獲取傳遞的參數值。

this.$route.params.id

方案二:

父組件中:通過路由屬性中的name來確定匹配的路由,通過params來傳遞參數。

       this.$router.push({name: 'Describe',params: {id: id}})

對應路由配置: 這里可以添加:/id 也可以不添加,不添加數據會在url后面顯示,不添加數據就不會顯示

   {path: '/describe',name: 'Describe',component: Describe}

子組件中: 這樣來獲取參數

this.$route.params.id

方案三:

父組件:使用path來匹配路由,然后通過query來傳遞參數
這種情況下 query傳遞的參數會顯示在url后面?id=?

    this.$router.push({path: '/describe',query: {id: id}})

對應路由配置:

   {path: '/describe',name: 'Describe',component: Describe}

對應子組件: 這樣來獲取參數

this.$route.query.id
這里要特別注意 在子組件中 獲取參數的時候是$route.params 而不是
$router 這很重要~~~

[更多詳情](https://github.com/vuejs/vue-...)

tips
可能上面少了this 會誤導新手 直接使用 $route來獲取,所以這邊加上this
tips 很多人說方案二有問題。 統計下 下面回復的有問題的地方
  • 需要在路由配置后面添加對應的參數即 需要添加/:id
  • 如果不添加:id數據會在刷新的時候消失。

首先,如果使用方案二 是可以在子路由獲取到數據的。
對于頁面刷新數據消失,原因是這樣的,路由傳遞數據 那么什么是路由傳遞數據,是否可以理解,頁面跳轉的時候攜帶的數據。如果你已經在子頁面了,你點擊刷新,這個時候 并沒有觸發 你在父級頁面定義的 this.$router.push()方法。所以為什么會有數據呢。

還有使用params 我的目的就是為了在url后面不會攜帶參數。所以我為什么要添加:/id 這樣的寫法呢。

所以 沒有對錯 只是需求的不同 難道不是么

對于 注意這里不能使用:/id來傳遞參數了,因為父組件中,已經使用params來攜帶參數了。 這句話確實有點武斷。 已經修改

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/248866.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/248866.shtml
英文地址,請注明出處:http://en.pswp.cn/news/248866.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Rust從入門到放棄(1)—— hello,world

安裝及環境配置 特點&#xff1a;安全&#xff0c;性能&#xff0c;并發rust源配置RLS安裝cargo rust管理工具&#xff0c;該工具可以愉快方便的管理rust工程 #!/bin/bash mkdir learn cd learn cargo init ## 該命令會在當前目錄下初始化一個## 目錄下會出現一個Cargo.toml文…

牛客33-tokitsukaze and Number Game(數論)

題目描述 tokitsukaze又在玩3ds上的小游戲了&#xff0c;現在她遇到了難關。 tokitsukaze得到了一個整數x&#xff0c;并被要求使用x的每一位上的數字重新排列&#xff0c;組成一個能被8整除的數&#xff0c;并且這個數盡可能大。 聰明的你們請幫幫可愛的tokitsukaze&#xff0…

手摸手,帶你用vue擼后臺 系列一(基礎篇) - 掘金

完整項目地址&#xff1a;vue-element-admin 系列文章&#xff1a; 手摸手&#xff0c;帶你用 vue 擼后臺 系列一&#xff08;基礎篇&#xff09;手摸手&#xff0c;帶你用 vue 擼后臺 系列二(登錄權限篇)手摸手&#xff0c;帶你用 vue 擼后臺 系列三 (實戰篇)手摸手&#xf…

21、python基礎學習-new_three_menu

1 #!/usr/bin/env python2 #__author: hlc3 #date: 2019/5/294 5 menu {6 北京: {7 海淀: {8 五道口: {9 soho: {}, 10 網易: {}, 11 google: {} 12 }, 13 中關村: { 14 …

文獻筆記(十六)

一、基本信息 標題&#xff1a;一種基于 C 語言訪問 MySQL 數據庫的研究 時間&#xff1a;2016 出版源&#xff1a;貴州輕工職業技術學院 領域分類&#xff1a;數據庫與信息管理 作者&#xff1a;唐林 副教授&#xff0c; 研究方向&#xff1a; 計算機應用 二、研究背景 相關工…

webpack+vue+mui學習心得

引入mui 1.不需要npm安裝; 直接從官方下載丟進來 2.那就是全局引用了; 沒錯,就是index.html里直接引入,當然也可以main.js引入,隨意啦! so easy 3.找到webpack.base.conf.js,在module與plugins之間插入以下代碼: 4.這樣就可以在項目里面直接用了.然就是mui與vue-router及點…

[java設計模式簡記] 觀察者模式(Observer-Pattern)

觀察者模式(Observer-Pattern) 數據主體擁有需要數據的對象的數據&#xff0c;并且數據改變時需要數據的對象要及時知道 意圖&#xff1a; 定義對象間的一種一對多的依賴關系&#xff0c;當一個對象的狀態發生改變時&#xff0c;所有依賴于它的對象都得到通知并被自動更新。主要…

【ARTS】01_04_左耳聽風-20181203~1209

ARTS&#xff1a; Algrothm: leetcode算法題目Review: 閱讀并且點評一篇英文技術文章Tip/Techni: 學習一個技術技巧Share: 分享一篇有觀點和思考的技術文章Algorithm Single Number https://leetcode.com/problems/single-number/ 1&#xff09;problem Given a non-empty arra…

vue項目(webpack+mintui),使用hbuilder打包app - 小小人兒大大夢想 - 博客園

一、配置config/index.js 本人沒有配置index.js文件&#xff0c;就開始進行了打包&#xff0c;結果最終效果是頁面空白&#xff0c;解決了空白&#xff0c;接著底部圖標&#xff08;我是用的阿里巴巴圖片&#xff09;資源找不到。所以配置這步比較重要。 &#xff08;1&#…

caffe介紹

轉載于:https://www.cnblogs.com/Artimis-fightting/p/10945099.html

python-mysql 基礎知識記錄

cursor.fetchone() 與 cursor.fetchall() 如果查詢結果為空&#xff0c;前者返回 None&#xff0c;后者返回[] 此時如用 len() 函數計算長度&#xff0c;前者報錯&#xff0c;后者返回0 轉載于:https://www.cnblogs.com/ZuoAn-xieyang/p/10097230.html

微服務之consul(一) - 詩碼者 - 博客園

一、概述 consul是google開源的一個使用go語言開發的服務發現、配置管理中心服務。內置了服務注冊與發現框 架、分布一致性協議實現、健康檢查、Key/Value存儲、多數據中心方案&#xff0c;不再需要依賴其他工具&#xff08;比如ZooKeeper等&#xff09;。服務部署簡單&#x…

C#動態加載dll,dll目錄指定

<?xml version"1.0"?><configuration><startup> <supportedRuntime version"v4.0" sku".NETFramework,Versionv4.0"/></startup> <runtime> <assemblyBinding xmlns"urn:schemas-microsoft-com:a…

RestFramework之認證組件

一、認證組件的介紹 對于認證&#xff0c;我們一般有三種方式&#xff0c;即cookie, session,token, cookie,是將信息存放在客戶端(瀏覽器上)&#xff0c;信息不安全&#xff1b;session,把信息放在服務器數據庫中&#xff0c;但是要是信息量較大&#xff0c;對服務器的壓力就會…

圖解基于 Node.js 實現前后端分離 - CSDN博客

因為會上出了個意外&#xff0c;ppt圖片全部丟失&#xff0c;只好對著白板跟大家交流了半個多小時。由于我做演講不喜歡寫太多的文字&#xff0c;沒有圖片的情況下講漏了一些內容。這篇文章是我在會上分享內容對照ppt進行地整理。 基本介紹 首先從一個重要的概念“模板”說起…

java基礎之XML

目錄 java基礎之XML1. XML解析概述2. DOM4J介紹2.1 常用包2.2 內置元素2.2 Element類2.3 Attribute類2.4 常用操作3. 代碼演示3.1 DOM4J讀取xml文件3.2 DOM4J創建xml文件3.2 DOM4J修改xml文件java基礎之XML XML是一種通用的數據交換格式,它的平臺無關性、語言無關性、系統無關性…

CF176E Archaeology(set用法提示)

題目大意&#xff1a; 給一棵樹&#xff0c;每次激活或熄滅一個點&#xff0c;每次問這些點都聯通起來所需的最小總邊權 分析&#xff1a; 若根據dfs序給所有點排序&#xff0c;為$v1,v2,v3....vk$&#xff0c;那么答案就是$(dis(v1,v2)dis(v2,v3)...dis(vk-1,vk)dis(vk,v1))/2…

網上整理的對于Rest和Restful api的理解 - 那啥快看 - 博客園

一、什么是Rest? REST不是"rest"這個單詞&#xff0c;而是幾個單詞縮寫 -- REpresentational State Transfer 直接翻譯&#xff1a;表現層狀態轉移&#xff0c;但這個翻譯正常人根本看不懂&#xff0c;找到的一種最好理解的說法是&#xff0c;URL定位資源&#xff…

P1101 單詞方陣(DFS)

題目描述 給一n \times nnn的字母方陣&#xff0c;內可能蘊含多個“yizhong”單詞。單詞在方陣中是沿著同一方向連續擺放的。擺放可沿著 88個方向的任一方向&#xff0c;同一單詞擺放時不再改變方向&#xff0c;單詞與單詞之間可以交叉,因此有可能共用字母。輸出時&#xff0c;…

企業級rancher搭建Kubernetes(采用rancher管理平臺搭建k8s)

一、簡介 Rancher簡介 來源官方&#xff1a;https://www.cnrancher.com/ Rancher是一個開源的企業級容器管理平臺。通過Rancher&#xff0c;企業再也不必自己使用一系列的開源軟件去從頭搭建容器服務平臺。Rancher提供了在生產環境中使用的管理Docker和Kubernetes的全棧化容器部…