$route 和 $router 的區別是什么?

在 Vue Router 中,$route 和 $router 是兩個不同的對象,它們各自承擔著不同的角色。下面是它們的主要區別:

一、$route
  1. 定義

$route 是當前路由的信息對象,包含了與當前路由相關的狀態和參數。它是一個只讀對象。
2. 主要屬性

params:動態路由參數,例如 /user/:id 中的 id。
query:查詢參數,通常在 URL 中以 ? 開始,例如 /user?id=123。
path:當前路由的路徑。
name:路由的名稱(如果有定義)。
fullPath:當前路由的完整路徑,包括查詢參數。
  1. 使用場景

    訪問當前路由的狀態和參數。
    在組件中獲取路由信息,例如動態加載數據。

  2. 示例


// 在組件中使用 $route
console.log(this.$route.params.id); // 獲取動態路由參數
console.log(this.$route.query.q);    // 獲取查詢參數
二、$router
  1. 定義

$

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

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

相關文章

node.js 08 express的使用和熱重載nodemon的安裝

一.express的安裝和使用 安裝 npm i express 使用 //引入express const express require(express)//啟動服務器 const app express()//設置get請求地址,獲取請求地址信息,和發送返回的數據 app.get(/bailan,(req, res) > {//req.query可以獲取到客…

Python因為網絡原因安裝依賴庫報錯

現象 在終端運行以下指令 pip install pyautogui pillow keyboard 出現報錯,終端信息如下: PS D:\code\Python> pip install pyautogui pillow keyboard Collecting pyautoguiUsing cached PyAutoGUI-0.9.54.tar.gz (61 kB)Installing build depe…

面試問題記錄1

問題一:性能測試步驟 性能測試步驟主要包括以下幾個階段: ?1. 需求分析階段? 明確測試目標,了解性能測試需求,包括業務列表、性能指標、測試環境、數據量等詳細需求?12。熟悉項目相關的資源,如架構設計、軟硬件環…

開源 GPU 集群管理器 GPUStack 輕松拉起deepseek各版本模型

GPUStack 是一個用于運行 AI 模型的開源 GPU 集群管理器。 項目地址:gpustack/gpustack: Manage GPU clusters for running AI modelshttps://github.com/gpustack/gpustackhttps://github.com/gpustack/gpustackhttps://github.com/gpustack/gpustackhttps://githu…

ESP32開發學習記錄---》GPIO

she 2025年2月5日,新年后決定開始充電提升自己,故作此記,以前沒有使用過IDF開發ESP32因此新年學習一下ESP32。 ESPIDF開發環境配置網上已經有很多的資料了,我就不再贅述,我這里只是對我的學習經歷的一些記錄。 首先學習一個…

3-kafka服務端之控制器

文章目錄 概述控制器的選舉與故障恢復控制器的選舉故障恢復 優雅關閉分區leader的選舉 概述 在Kafka集群中會有一個或多個broker,其中有一個broker會被選舉為控制器(Kafka Controler),它負責管理整個集群中所有分區和副本的狀態。…

物聯網的三層架構:感知層、網絡層與應用層

物聯網(Internet of Things, IoT)作為現代科技的重要組成部分,正在深刻改變我們的生活和工作方式。它將物理世界與數字世界無縫連接,通過智能設備、傳感器和網絡技術,實現數據的采集、傳輸和應用。物聯網的架構通常分為…

react的antd表單校驗,禁止輸入空格并觸發校驗提示

首先需要用到form組件&#xff0c;在form.item內添加rules屬性&#xff0c;寫正則表達式 <Form.Itemlabel"員工姓名"name"name"rules{[{ required: true, message: 員工姓名 },{ pattern: /^(?!\s*$).$/, message: 不能全是空格 },]}> <Input p…

JavaScript addEventListener事件列表

addEventListener 方法用于向指定元素添加事件監聽器&#xff0c;當該對象觸發指定的事件時&#xff0c;指定的回調函數就會被執行。以下是一些常見的事件類型 鼠標事件 click: 當用戶點擊某個對象時觸發。 dblclick: 當用戶雙擊某個對象時觸發。 contextmenu&#xff1a;當…

IDEA 中集成 Maven,配置環境、創建以及導入項目

目錄 在 IntelliJ IDEA 中集成 Maven 并配置環境 1. 打開 IDEA 設置 2. 定位 Maven 配置選項 3. 配置 Maven 路徑 4. 應用配置 創建 Maven 項目 1. 新建項目 2. 選擇項目類型 3. 配置項目信息 4. 確認 Maven 設置 5. 完成項目創建 導入 Maven 項目 1. 打開導入窗口…

神經網絡常見激活函數 1-sigmoid函數

sigmoid 1 函數求導 sigmoid函數 σ ( x ) 1 1 e ( ? x ) \sigma(x) \frac{1}{1e^{(-x)}} σ(x)1e(?x)1? sigmoid函數求導 d d x σ ( x ) d d x ( 1 1 e ? x ) e ? x ( 1 e ? x ) 2 ( 1 e ? x ) ? 1 ( 1 e ? x ) 2 1 1 e ? x ? 1 ( 1 e ? x ) 2 …

窮舉vs暴搜vs深搜vs回溯vs剪枝系列一>黃金礦工

目錄 決策樹&#xff1a;代碼設計代碼&#xff1a; 決策樹&#xff1a; 代碼設計 代碼&#xff1a; class Solution {boolean[][] vis;int ret,m,n;public int getMaximumGold(int[][] grid) {m grid.length;n grid[0].length;vis new boolean[m][n]; for(int i 0; i <…

rabbitMQ消息轉換器

消息轉換器 Spring的消息發送代碼接收的消息體是一個Object&#xff1a; 而在數據傳輸時&#xff0c;它會把你發送的消息序列化為字節發送給MQ&#xff0c;接收消息的時候&#xff0c;還會把字節反序列化為Java對象。 只不過&#xff0c;默認情況下Spring采用的序列化方式是J…

Java 如何覆蓋第三方 jar 包中的類

目錄 一、需求描述二、示例描述三、操作步驟四、驗證結果五、實現原理 背景&#xff1a; 在我們日常的開發中&#xff0c;經常需要使用第三方的 jar 包&#xff0c;有時候我們會發現第三方的 jar 包中的某一個類有問題&#xff0c;或者我們需要定制化修改其中的邏輯&#xff0c…

CS 與 BS 架構的差異

在數字化的今天&#xff0c;選擇軟件架構模式對系統的性能、維護、安全和成本都有很大影響。BS架構和CS架構是最常見的兩種模式&#xff0c;了解它們的區別和特點對開發人員和企業決策者都很重要。 CS架構最早出現&#xff0c;當時用戶直接從主機獲取數據。隨著客戶端和服務端…

HTML之table表格學習

HTML table使用 thead、tbody、tfoot均可省略&#xff1b; 瀏覽器解析的時候會自動套上tbody tr 行 td 列 th 標題列屬性 colspan 列占用數 rowspan 行占用數 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8">…

常用抓包工具tcpdump、Fiddler、Charles、Wireshark 和 Sniffmaster 下載地址

抓包大師官網下載地址 Sniff Master Download - Free TCP and HTTPS Proxy Sniffing Tool, Supports IOS Sniffing Fiddler classic官網下載地址 Download Fiddler Web Debugging Tool for Free by Telerik Fiddler Everywhere官網下載地址 The Ultimate Web Debugging Tool …

【PostgreSQL內核學習 —— (WindowAgg(二))】

WindowAgg WindowAggState 結構體窗口聚合行為ExecInitWindowAgg 函數ExecWindowAgg 函數代碼邏輯解釋&#xff1a;計算窗口偏移量代碼邏輯詳細解釋&#xff1a; 代碼邏輯解釋&#xff1a;窗口聚合分區初始化與行推進邏輯代碼邏輯詳細解釋&#xff1a; 代碼邏輯解釋&#xff1a…

區塊鏈項目孵化與包裝設計:從概念到市場的全流程指南

區塊鏈技術的快速發展催生了大量創新項目&#xff0c;但如何將一個區塊鏈項目從概念孵化成市場認可的產品&#xff0c;是許多團隊面臨的挑戰。本文將從孵化策略、包裝設計和市場落地三個維度&#xff0c;為你解析區塊鏈項目成功的關鍵步驟。 一、區塊鏈項目孵化的核心要素 明確…

【React】受控組件和非受控組件

目錄 受控組件非受控組件基于ref獲取DOM元素1、在標簽中使用2、在組件中使用 受控組件 表單元素的狀態&#xff08;值&#xff09;由 React 組件的 state 完全控制。組件的 state 保存了表單元素的值&#xff0c;并且每次用戶輸入時&#xff0c;React 通過事件處理程序來更新 …