1. 程式人生 > >【vue】動態路由vue-router 動態載入

【vue】動態路由vue-router 動態載入

有時系統需要根據使用者的許可權來動態載入路由~vue-router有提供給我們一個 addRoutes() 方法,但這個方法只有2.2.0以上版本支援。下面我們看下具體寫法:

var router = {
    path: '',
    name: '',
    component: resolve => require.ensure([], (require) => {
        resolve(require.context('SRC', true, /\.vue$/)(`./${...}`)) //...:寫路徑地址
    })
};
this.$router.addRoutes
(router);

如果不是動態載入的話,component可以寫成

component: resolve => require(["..."], resolve) //...:寫路徑地址

如果是每個使用者都有的router則可以簡化成:

var LoginBlock from "..." //...是檔案路徑
var route = [
    path: '',
    name: '',
    component: LoginBlock
]

相關推薦

vue動態路由vue-router 動態載入

有時系統需要根據使用者的許可權來動態載入路由~vue-router有提供給我們一個 addRoutes() 方法,但這個方法只有2.2.0以上版本支援。下面我們看下具體寫法: var router =

Vue解決路由切換,頁面不更新的實用方法

前言:vue-router的切換不同於傳統的頁面的切換。路由之間的切換,其實就是元件之間的切換,不是真正的頁面切換。這也會導致一個問題,就是引用相同元件的時候,會導致該元件無法更新,也就是我們口中的頁面

vue切換路由頁面時,中止上個路由頁面未返回資料的請求

背景: 通常情況下,介面返回會比較快,不會出現此類狀況。 但是也有可能是後臺介面也依賴於上游介面,那麼處理過程中可能會有一些延遲之類的問題。 當用戶的某些操作,比如快速切換選單,某些選單一進入頁面後,就會向後臺傳送請求,在請求未拿到資料時,就被使用者切換到下個路

bzoj1109[POI2007]堆積木Klo 動態規劃+樹狀數組

pan ret 選擇 data 成了 std cpp name 樹狀數組 題目描述 Mary在她的生日禮物中有一些積木。那些積木都是相同大小的立方體。每個積木上面都有一個數。Mary用他的所有積木壘了一個高塔。媽媽告訴Mary遊戲的目的是建一個塔,使得最多的積木在正確的位

Vue詳解Vue生命周期

pda -a clas 文本 con 存在 操作 ef6 註意 Vue實例的生命周期全過程(圖) (這裏的紅邊圓角矩形內的都是對應的Vue實例的鉤子函數) 在beforeCreate和created鉤子函數間的生命周期 在beforeC

Vue詳解Vue組件系統

最終 文件 type html中 emit 監聽 做了 駝峰命名 操作 Vue渲染的兩大基礎方式 new 一個Vue的實例 這個我們一般會使用在掛載根節點這一初始化操作上: new Vue({ el: ‘#app‘ }) 註冊組件並使用 通過

Vue淺談Vue不同場景下組件間的數據交流

事件 不同 name usm quest 數據流 這就是 ring des 淺談Vue不同場景下組件間的數據“交流” Vue的官方文檔可以說是很詳細了。在我看來,它和react等其他框架文檔一樣,講述的方式的更多的是“方法論&

luoguP3690 模板Link Cut Tree (動態樹)[LCT]

格式 %d getch logs cstring name flag -1 處理 題目背景 動態樹 題目描述 給定N個點以及每個點的權值,要你處理接下來的M個操作。操作有4種。操作從0到3編號。點從1到N編號。 0:後接兩個整數(x,y),代表詢問從x到y的路徑上的

javajava反射機制,動態獲取對象的屬性和對應的參數值,並屬性按照字典序排序,Field.setAccessible()方法的說明可用於微信支付 簽名生成

modifier 直接 this 字段值 1-1 讓我 toupper ima play 方法1:通過get()方法獲取屬性值 package com.sxd.test.controller; public class FirstCa{ private

luogu P3690 模板Link Cut Tree (動態樹)

clu pda col make class getchar() root 動態樹 pan https://www.luogu.org/problemnew/show/3690 這大概還是一道模板題目 #include<cstdio> #include

bzoj2216[Poi2011]Lightning Conductor 1D1D動態規劃優化

規劃 sample long 得到 mes tput stream truct 優化 Description 已知一個長度為n的序列a1,a2,…,an。對於每個1<=i<=n,找到最小的非負整數p滿足 對於任意的j, aj < = a

BZOJ4872分手是祝願(動態規劃,數學期望)

esp math map ostream pac mes ++i rac define 【BZOJ4872】分手是祝願(動態規劃,數學期望) 題面 BZOJ 題解 對於一個狀態,如何求解當前的最短步數? 從大到小枚舉,每次把最大的沒有關掉的燈關掉 暴力枚舉因數關就好 假設我

luogu3690 模板Link Cut Tree (動態樹)

pre class HR name print () OS 模板 pushd 參考there和there #include <iostream> #include <cstdio> using namespace std; int n, m, val

題解 [HNOI/AHOI2018]道路 (動態規劃)

() 簡單 https it is min UC def main std 懶得復制,戳我戳我 Solution: \(dp[i][j][k]\)以\(i\)為子樹根節點,到根節點中有\(j\)條公路沒修,\(k\)條鐵路沒修,存子樹不便利和 \(dp[i][j][k]=

題解 bzoj4472: [Jsoi2015]salesman (動態規劃)

規劃 problem 越界 PE names 子節點 tin www. uniq bzoj4472,懶得復制,戳我戳我 Solution: 體面意思:從\(1\)號節點出發,每到一個節點就必須停下,獲得節點權值(每個節點只會獲得一次),每個點有個規定的停留次數,求最大可獲

BZOJ3991尋寶遊戲(動態規劃)

維護 inline printf insert struct print clu getch map 【BZOJ3991】尋寶遊戲(動態規劃) 題面 BZOJ 題解 很明顯,從任意一個有寶藏的點開始,每次走到相鄰的\(dfs\)的節點就行了。 證明? 類似把一棵樹上的關鍵點

BZOJ4654NOI2016國王飲水記(動態規劃,斜率優化)

code 奇怪 while lib show ima double 優化 .com 【BZOJ4654】【NOI2016】國王飲水記(動態規劃,斜率優化) 題面 BZOJ 洛谷 題解 首先肯定是找性質。 明確一點,比\(h_1\)小的沒有任何意義。 所以我們按照\(h\)排

BZOJ3203保護出題人(動態規劃,斜率優化)

現在 bzoj3203 d+ while 我們 register 攻擊 nod http 【BZOJ3203】保護出題人(動態規劃,斜率優化) 題面 BZOJ 洛谷 題解 在最優情況下,肯定是存在某只僵屍在到達重點的那一瞬間將其打死 我們現在知道了每只僵屍到達終點的時間,因

BZOJ4006管道連接(動態規劃,斯坦納樹)

map 動態 code ring class new get efi include 題面 BZOJ 洛谷 題解 和這題區別不是很大吧。 基本上拿過來改一下就做完了。 #include<iostream> #include<cstdio> #incl

BZOJ1294[SCOI2009]圍豆豆(動態規劃,狀壓)

bool pre max += 網格 中心 是否 ret algo 【BZOJ1294】[SCOI2009]圍豆豆(動態規劃,狀壓) 題面 BZOJ 洛谷 題解 首先考慮如何判斷一個點是否在一個多邊形內(不一定是凸的),我們從這個點開始,朝著一個方向畫一條射線,看看它和這個