Vue中管理路由 vue router路由配置

在新建vue router時，router的構建選項有routes、mode、base、linkactiveclass、linkexactactiveclass等等，這裡只介紹mode和routes，我們常說的路由配置一般指配置routes。

詳細的請查詢官方文件

vue-router的前端路由有兩個模式"hash"和"history"，history模式要依賴伺服器配置，請參考spa中前端路由實現原理與vue-router前端路由模式

routes用來建立vue-router路由例項的配置項，是乙個陣列，用來設定一組url與元件的對應關係，陣列中的成員稱為一條路由記錄。

其中一條路由的配置項

,// 4、配置命名檢視元件 redirect? : string | location | function, //5、路由重定向 props? : boolean | object | function, //6、路由元件傳遞引數 alias? : string | array ,//7、路由別名 children? : array ,// 8、巢狀子路由 beforeenter? :(to: route, from : route, next: function) => void ,//9、配置路由獨享的守衛 meta? : any, // 10、自定義標籤屬性，比如：是否需要登入 base: string, // 11、配置單頁應用的基路徑 // 2.6.0+ casesensitive? : boolean, //12、匹配規則是否大小寫敏感？(預設值：false) pathtoregexpoptions? : object //13、編譯正則的選項

}

下面建立4個元件來介紹這些配置項,分別是產品根元件、產品列表、產品詳情和404頁面

const login =
;const products =
;const productlist=
;const productdetail=
;const page404=
;const router =
newvuerouter()
;console.
log(router)
;const vm=
newvue()
;

string型別，必選，用來匹配瀏覽器url，hash模式時path是window.location.hash中#後面的部分，history模式時path是window.location.pathname的值。

routes:[,
,//path中攜帶`動態路徑引數`
,//會匹配以 /products/ 開頭的任意路徑
,     children:[}
,},]
}]

重定向是將乙個path定向到另乙個path，位址列中顯示目標路由的那個路徑，redirect的值可以是乙個path值，也可以是乙個物件，甚至是乙個函式。

下面的**都是將路徑為"/「時，定向到」/products"

,}
,

在vue例項中引入router例項後，可以在vue中使用this.$route訪問當前路由物件，如productdetail元件的模板中可以通過}獲得當前路由物件路徑引數id,在元件中使用 $route 會使之與其對應路由形成高度耦合。

const productdetail=
;const router =
newvuerouter(]
})

使用 props 將元件和路由解耦：

const productdetail=
;const router =
newvuerouter(]
})

別名和重定向看起來相似，

,

children屬性值是乙個陣列，陣列中的項和前面講的路由物件幾乎沒有區別，但子路由中的path不需要加』/』，因為以「/」開頭的巢狀路徑會被當作根路徑。

本例中router配置這樣改寫

const router =
newvuerouter(,
,,,]
},],
mode:
'history'})
;

9、beforeenter 配置路由獨享的守衛

在路由記錄上上直接定義 beforeenter 守衛，是這條路由路由獨享的路由守衛，引數是to,from,next

關於路由守衛詳見vue中管理路由-vue-router路由守衛

meta是每個路由的標識資訊，是路由物件固有的乙個資訊,無論在路由中是否定義meta，在元件中都可以通過this.$route.meta訪問到，如果沒有定義，返回{}

根據路由的meta屬性可以實現驗證使用者是否登入、設定標題、圖示、麵包屑導航等等

下面的**，配置這條路由驗證進入的時候驗證是否登入，並設定網頁的title


,  beforeenter:
(to,
from
,next)
=>
else
next()
;}}

new
router()
;

如果這樣配置，訪問 http://localhost:***/view/ 和 http://localhost:***/效果是一樣的。

預設是false,不敏感。

下面的配置下，/login匹配不到登入元件

,

Vue中管理路由 vue router路由配置

vue route 三後台管理路由配置

如何使用route管理路由表

Vue非同步元件處理路由元件載入狀態

Vue中管理路由 vue router路由配置

vue route 三 後台管理路由配置

如何使用route管理路由表

Vue非同步元件處理路由元件載入狀態

相關推薦

vue route 三後台管理路由配置