主頁 > 企業開發 > 【面試題】Vue2動態添加路由 router.addRoute()

【面試題】Vue2動態添加路由 router.addRoute()

2022-09-27 08:52:30 企業開發

Vue2動態添加路由

點擊打開視頻講解更加詳細

場景: 一般結合VueX和localstorage一起使用

router.addRoutes

vue-router4后 已廢棄:使用 router.addRoute() 代替,
vue-router4版本前也可用

函式簽名:

router.addRoutes(routes: Array<RouteConfig>)

動態添加更多的路由規則,引數必須是一個符合 routes 選項要求的陣列,

案例:

let routerObj = { path: '/about', name: 'about', component: () => import('../views/about.vue') }
router.addRoutes([routerObj])   //addRoutes在vue - router4里要被移除了 ,引數是陣列

router.addRoute

添加一條新路由規則,如果該路由規則有 name,并且已經存在一個與之相同的名字,則會覆寫它,

函式簽名:

addRoute(route: RouteConfig): () => void

router.addRoute

添加一條新的路由規則記錄作為現有路由的子路由,如果該路由規則有 name,并且已經存在一個與之相同的名字,則會覆寫它,

函式簽名:

addRoute(parentName: string, route: RouteConfig): () => void

案例:

let routerObj = { path: '/about', name: 'about', component: () => import('../views/about.vue') }
router.addRoute(routerObj)   //vue-router4版本后要使用addRoute,引數是物件

若對您有幫助,請點擊跳轉到B站一鍵三連哦!感謝支持!!!

轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/509639.html

標籤:其他

上一篇:【前端必會】webpack loader 到底是什么

下一篇:返回列表

標籤雲
其他(145333) Python(37296) JavaScript(24909) Java(16484) C(14967) 區塊鏈(8236) C#(7957) AI(7469) 爪哇(7405) html(6776) MySQL(6728) 基礎類(6313) sql(6084) 熊猫(6051) PHP(5787) 数组(5741) R(5307) 反应(5188) Linux(5185) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4415) 数据框(4310) css(4249) 节点.js(4029) C語言(3288) json(3241) 列表(3120) C++語言(3117) 扑(3085) 安卓(2997) 打字稿(2957) VBA(2784) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2401) ASP.NET(2364) MongoDB(2317) 麻木的(2285) 正则表达式(2232) 字典(2211) 循环(2197) 迅速(2174) 擅长(2159) 镖(2150) 功能(1967) Web開發(1951) python-3.x(1918) 弹簧靴(1911) xml(1884) for循环(1841) 谷歌表格(1837) Unity3D(1824) PostgreSQL(1808) .NET技术(1800) 網絡通信(1793) .NETCore(1792) 蟒蛇-3.x(1774)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入,國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求,通過反向代理或者負載均衡將請求轉發到后端,后端Transfer-Encoding優先級較高,以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差,然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成:導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議,高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計,高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz,更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置,該裝置以M國全球定位系統(GLOBAL POSITIONING SYSTEM,縮寫為GPS)或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小,只要企業想省錢,那么企業的某些服務就一定會采用外包的形式,然而看似美好又經濟的策略,其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的,最常見的就是話務/客服這種需要大量重復性、無技術性的服務,或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊,通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里,當然也會發生在其它地發,如登錄框等等也會存在注入,只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參,引數為exp 經過三層過濾執行 第一層過濾偽協議,第二層過濾帶引數的函式,第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式,相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 【面試題】Vue2動態添加路由 router.addRoute()

    Vue2動態添加路由 點擊打開視頻講解更加詳細 場景: 一般結合VueX和localstorage一起使用 router.addRoutes vue-router4后 已廢棄:使用 router.addRoute() 代替。 vue-router4版本前也可用 函式簽名: router.addRou ......

    uj5u.com 2022-09-27 08:52:30 more
  • 【前端必會】webpack loader 到底是什么

    #概述 webpack的使用中我們會遇到各種各樣的插件、loader。 webpack的功力主要體現在能理解各個插件、loader的數量上。理解的越多功力越深 loader是什么呢? #背景 了解loader前,我們在來看個問題,有了前面的基礎我們還是用個簡單的樣例來說明 由于一切都是模塊,我們想用 ......

    uj5u.com 2022-09-27 08:52:19 more
  • Vue原始碼剖析

    Vue 回應式資料 什么是回應式資料:資料變了,視圖能更新,反之視圖更新,資料要不要更新,不歸回應式資料管。 Vue 在內部實作了一個最核心的defineReactive方法,借助了Object.defineProperty,核心就是劫持屬性(只會劫持已經存在的屬性),把所有的屬性,重新的添加了 g ......

    uj5u.com 2022-09-27 08:52:10 more
  • axios學習筆記

    1 axios的理解和使用 1.1 axios是什么 前端最流行的ajax請求庫 react/vue官方都推薦使用axios發ajax請求 檔案地址 1.2 axios特點 基于xhr+promise 的異步ajax請求 瀏覽器端/node 端都可以使用 支持 請求/回應 攔截器 支持請求取消 請求 ......

    uj5u.com 2022-09-27 08:52:04 more
  • 基于spring的微服務和vue的前后端分離的專案怎么配置跨域處理

    ###1. 后端配置 新建一個CrosConfig.java檔案(配置類),允許任意請求發送 import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Confi ......

    uj5u.com 2022-09-27 08:52:00 more
  • 詳解JS中 call 方法的實作

    摘要:本文將全面的,詳細決議call方法的實作原理 本文分享自華為云社區《關于 JavaScript 中 call 方法的實作,附帶詳細決議!》,作者:CoderBin。 本文將全面的,詳細決議call方法的實作原理,并手寫出自己的call方法,相信看完本文的小伙伴都能從中有所識訓。 call 方法 ......

    uj5u.com 2022-09-27 08:51:55 more
  • 【前端必會】webpack loader 到底是什么

    #概述 webpack的使用中我們會遇到各種各樣的插件、loader。 webpack的功力主要體現在能理解各個插件、loader的數量上。理解的越多功力越深 loader是什么呢? #背景 了解loader前,我們在來看個問題,有了前面的基礎我們還是用個簡單的樣例來說明 由于一切都是模塊,我們想用 ......

    uj5u.com 2022-09-27 08:50:40 more
  • axios學習筆記

    1 axios的理解和使用 1.1 axios是什么 前端最流行的ajax請求庫 react/vue官方都推薦使用axios發ajax請求 檔案地址 1.2 axios特點 基于xhr+promise 的異步ajax請求 瀏覽器端/node 端都可以使用 支持 請求/回應 攔截器 支持請求取消 請求 ......

    uj5u.com 2022-09-27 08:50:31 more
  • 詳解JS中 call 方法的實作

    摘要:本文將全面的,詳細決議call方法的實作原理 本文分享自華為云社區《關于 JavaScript 中 call 方法的實作,附帶詳細決議!》,作者:CoderBin。 本文將全面的,詳細決議call方法的實作原理,并手寫出自己的call方法,相信看完本文的小伙伴都能從中有所識訓。 call 方法 ......

    uj5u.com 2022-09-27 08:50:27 more
  • pandas (一)

    1 Pandas序列Series 1.1 根據串列生成序列 Series X=[1,3,6,4,9];X weight=[67,66,83,68,70];weight sex=['女','男','男','女','男'];sex S1=pd.Series(X);S1 S2=pd.Series(weig ......

    uj5u.com 2022-09-27 08:48:36 more