Vue Router 學習筆記（基礎篇）

vue router提供來做路由出口，渲染路徑匹配到的檢視元件。

渲染的元件還可以內嵌自己的，根據巢狀路徑，渲染巢狀元件。

路由檔案中：

const router =
newvuerouter(,
]})

有時候想同時 (同級) 展示多個檢視，而不是巢狀展示，例如建立乙個布局，有sidebar(側導航) 和main(主內容) 兩個檢視，這個時候命名檢視就派上用場了。你可以在介面中擁有多個單獨命名的檢視，而不是只有乙個單獨的出口。如果router-view沒有設定名字，那麼預設為default。

class
="view one"
>
router-view
>
class
="view two"
name
="a"
>
router-view
>
class
="view three"
name
="b"
>
router-view
>

乙個檢視使用乙個元件渲染，因此對於同個路由，多個檢視就需要多個元件。確保正確使用components配置 (帶上 s)：

const router =
newvuerouter(}
]})

巢狀命名檢視：

我們也有可能使用命名檢視建立巢狀檢視的複雜布局。這時你也需要命名用到的巢狀router-view元件。


>
>
user settingsh1
>
/>
/>
name
="helper"
/>
div>

,}
]}

通過this,$router訪問路由器，或訪問當前路由。

$route.params

模式匹配路徑

$route.params

/user/:username

/user/evan

/user/:username/post/:post_id

/user/evan/post/123

$route.query

$route.hash

$route.name

當前路由的名稱，如果有的話。

有時候，通過乙個名稱來標識乙個路由顯得更方便一些，特別是在鏈結乙個路由，或者是執行一些跳轉的時候。你可以在建立 router 例項的時候，在routes配置中給某個路由設定名稱。

const router =
newvuerouter(]
})

:to=
"}">
userrouter-link
>

這跟**呼叫router.push()是一回事：

router.
push(}
)

這兩種方式都會把路由導航到/user/123路徑。

vue router提供來導航。

該元件通過傳入『 to 』屬性指定目標位址，該元件缺省會被渲染成乙個標籤。

其中：實際生活中的應用介面，通常由多層巢狀的元件組合而成。

>
>
router-view
>
div>

這裡的是最頂層的出口，渲染最高端路由匹配到的元件。

同樣地，乙個被渲染元件同樣可以包含自己的巢狀。例如，在user元件的模板新增乙個:

const user =
}<
/h2>
<
/router-view>
<
/div>
}

要在巢狀的出口中渲染元件，需要在vuerouter的引數中使用children配置：

const router =
newvuerouter(,
]}]}
)

要注意，以 / 開頭的巢狀路徑會被當作根路徑。這讓你充分的使用巢狀元件而無須設定巢狀的路徑。

在元件中使用$route會使之與其對應路由形成高度耦合，從而使元件只能在某些特定的 url 上使用，限制了其靈活性。

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

取代與 $route 的耦合

const user =}'
}const router =
newvuerouter(]
})

通過 props 解耦

const user =}'
}const router =
newvuerouter(,
// 對於包含命名檢視的路由，你必須分別為每個命名檢視新增 `props` 選項：
, props:}]
})

除了使用建立 a 標籤來定義導航鏈結，我們還可以借助 router 的例項方法，通過編寫**來實現。

Vuerouter學習筆記

vue路由的作用將元件 components 對映到路由 routes 然後告訴 vue router 在渲染它們前端路由是對映關係是路徑和元件的對映關係 vuerouter 路由器物件然後該物件有routes屬性其為路由們配置，為陣列，陣列中每個值為乙個路由，路由就是相應的對映步...

vue router之學習筆記

用 vue.js vue router 建立單頁應用，是非常簡單的。使用 vue.js 我們已經可以通過組合元件來組成應用程式，當你要把 vue router 新增進來，我們需要做的是，將元件 components 對映到路由 routes 然後告訴 vue router 在渲染它們。在vue開發...

vueRouter 路由基礎

一重要概念 1 router是路由器 2 routes是一組路由 3 route某個路由 route.query route.params route.hash 後面的，包含 const router new vuerouter new vue 三 js方式跳轉傳參使用name跳轉 this.r...

Vue Router 學習筆記（基礎篇）

Vuerouter學習筆記

vue router之學習筆記

vueRouter 路由基礎

相關推薦