Vue中路由的巢狀與重定向

2021-09-30 16:38:21 字數 1068 閱讀 2882

示例路由的重定向主要有兩方面的用處:

路由的巢狀就是在以往的路由物件中加上children關鍵字,children後面跟陣列,其陣列中存放每個子路由節點的相對路徑等資訊。而子節點的路由位址是由路由的父節點位址拼接上子節點的相對位址組合而成。

路由的重定向是採用redirect關鍵字,該關鍵字後面跟路徑字串,由此來控制頁面在進入乙個頁面後,直接自動跳轉到redirect所指定的頁面中。

頁面2

//根介面

var root = vue.extend();

//定義page1頁面

var page1 = vue.extend();

//定義page2頁面

var page2 = vue.extend();

//設定路由規則

var router = new vuerouter(,,

]}]});

//開啟路由

從上面的資訊中我們可以看出,當我們訪問專案的根節點時,就是訪問/路徑時,其自動跳轉到'/root/page1'頁面,於是在頁面中就顯示出了page1中的資訊頁面1

從路徑'/root/page1'中我們也可以看到,其子頁面page1中的路由位址其實是由其父節點絕對路徑/root與子節點相對路徑page1拼接而成的。

這裡有乙個需要注意的事項,那就是在vue2.x中,如果當template模版中有多個dom元素,那麼這些dom元素需要被乙個父dom元素包裹,否則的話vue會報錯。

vue中路由巢狀的作用

vue中為什麼要有路由巢狀啊,一般的路由不就行了嗎?我們可以看乙個很簡單的例子,頁面效果是這樣的 html檔案 doctype html html lang en head meta charset utf 8 meta name viewport content width device widt...

vue路由的重定向

需求 專案的某些頁面沒有登入 本地沒有賬號密碼 是不允許檢視的,需要退出到登入頁面 之前寫react專案都是在對應頁面的willmount週期中處理的,近日學vue學到乙個統一處理的方式 1.單獨生成乙個redirect.js檔案,內容如下 路由重定向,在跳轉之前確認是否確認跳轉到該頁面 impor...

vue中路由巢狀 路由傳參

在vue中使用vue router方便我們進行頁面之間的跳轉,元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們。每個路由應該對映乙個元件。go to foo go to bar 實現路由跳轉的兩種方法,一種為path,另一種為name path he...