vue Router基本使用

2021-10-09 08:45:37 字數 1106 閱讀 4148

在建立過程中,路由元件和普通元件是一模一樣的,使用方法不一樣。

所有的路由配置放在一起應該是個陣列,單個的路由配置應該是個物件,物件中有很多固定的屬性

表示路由路徑,配置後可以去訪問對應的路由,並且將對應的元件顯示在 router-view 中

表示路由元件的配置,和path一一對應,當匹配到對應的path時,component會被渲染到router-view中

我們可以給我們的路由起乙個名字,可以使用name屬性,不是必填的

重定向

如果我們訪問/a則會直接跳轉到/b

別名

我們可以同時訪問 /a 或 /b 都可以匹配到對應的元件

巢狀路由,在網頁中,路由足夠複雜時,我們需要使用巢狀路由(當頁面的一部分內容改變,公共內容不變時,可以使用巢狀路由),children寫法和普通的routes中寫法一致

父路由和子路由可以拼接成乙個新的完整的路由

]}

]}

query方式在配置路由時不需要進行任何的配置,在使用路由時,可以在url之後新增?key=value&key=value的形式

created()

params方式和query方式的目的相同,但是方式不同。需要在配置時配置動態路由

/***/214531

created()

路由元件快取可以使用keep-alive包裹router-view,新增keep-alive會造成動態路由及query引數改變的路由失效,我們可以給keep-alive新增唯一key

>

:key

="$route.fullpath"

>

router-view

>

keep-alive

>

vue router的基本使用

基本使用步驟 script 新增路由鏈結 router link是vue中提供的標籤,缺省會被渲染為a標籤 to屬性缺省會被渲染為 href 屬性 to屬性的值缺省會被渲染為 開頭的hash位址 user router link 新增路由填充位 路由填充位 也叫路由佔位符 將來通過路由規則匹配到的元...

vue router路由的基本使用

import vue from vue import vuerouter from vue router 使用第三方外掛程式要用vue.use 這裡主要呼叫了vuerouter中的install方法,vuerouter註冊了兩個全域性元件 router link,router view,可以直接用 ...

vue router路由守衛基本使用

通過路由攔截,來判斷使用者是否登入,該頁面使用者是否有許可權瀏覽 全域性前置守衛 路由跳轉前呼叫 跳轉到指定路由,此處 寫法錯誤,會造成死迴圈直到瀏覽器棧溢位,呼叫next 的同時也會執行多一次beforeeach 正確寫法是先判斷要離開的路由是什麼再跳轉 router.beforeeach to,...