vue-router使用總結（附代碼）

來源：懂視網責編：小采時間：2020-11-27 19:49:36

vue-router使用總結（附代碼）

vue-router使用總結（附代碼）:這次給大家帶來vue-router使用總結（附代碼），vue-router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。前言今天面試被問到 vue的動態路由，我竟然沒有回答上來，感覺不是什么難得問題。好久沒有看vue-router的文檔，很多用的東西和概念沒有對上

推薦度：

點擊下載本文 文檔為doc格式

導讀vue-router使用總結（附代碼）:這次給大家帶來vue-router使用總結（附代碼），vue-router使用的注意事項有哪些，下面就是實戰案例，一起來看一下。前言今天面試被問到 vue的動態路由，我竟然沒有回答上來，感覺不是什么難得問題。好久沒有看vue-router的文檔，很多用的東西和概念沒有對上

路由元信息

我的理解就是他可以把路由的父路徑都列舉出來，完成一些任務，比如登錄，user 組件需要登錄，那么user下面的foo組件也需要，那么可以通過這個屬性來檢測這個路由線上的一些狀態。

定義路由的時候可以配置 meta 字段：

const router = new VueRouter({
 routes: [
 {
 path: '/foo',
 component: Foo,
 children: [
 {
 path: 'bar',
 component: Bar,
 // a meta field
 meta: { requiresAuth: true }
 }
 ]
 }
 ]
})

首先，我們稱呼 routes 配置中的每個路由對象為路由記錄。路由記錄可以是嵌套的，因此，當一個路由匹配成功后，他可能匹配多個路由記錄

例如，根據上面的路由配置，/foo/bar 這個 URL 將會匹配父路由記錄以及子路由記錄。

一個路由匹配到的所有路由記錄會暴露為 $route 對象（還有在導航守衛中的路由對象）的 $route.matched 數組。因此，我們需要遍歷 $route.matched 來檢查路由記錄中的 meta 字段。

下面例子展示在全局導航守衛中檢查元字段：

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
 // this route requires auth, check if logged in
 // if not, redirect to login page.
 if (!auth.loggedIn()) {
 next({
 path: '/login',
 query: { redirect: to.fullPath }
 })
 } else {
 next()
 }
 } else {
 next() // 確保一定要調用 next()
 }
})

數據獲取

我的理解就是在哪里獲取數據，可以再組件里面，也可以在組件的守衛里面，也就是組件的生命周期里面。

有時候，進入某個路由后，需要從服務器獲取數據。例如，在渲染用戶信息時，你需要從服務器獲取用戶的數據。我們可以通過兩種方式來實現：

導航完成之后獲取：先完成導航，然后在接下來的組件生命周期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示。

導航完成之前獲取：導航完成前，在路由進入的守衛中獲取數據，在數據獲取成功后執行導航。

從技術角度講，兩種方式都不錯 —— 就看你想要的用戶體驗是哪種。

導航完成后獲取數據

當你使用這種方式時，我們會馬上導航和渲染組件，然后在組件的 created 鉤子中獲取數據。這讓我們有機會在數據獲取期間展示一個 loading 狀態，還可以在不同視圖間展示不同的 loading 狀態。

假設我們有一個 Post 組件，需要基于 $route.params.id 獲取文章數據：

<template>
 <p class="post">
 <p class="loading" v-if="loading">
 Loading...
 </p>
 <p v-if="error" class="error">
 {{ error }}
 </p>
 <p v-if="post" class="content">
 <h2>{{ post.title }}</h2>
 <p>{{ post.body }}</p>
 </p>
 </p>
</template>
export default {
 data () {
 return {
 loading: false,
 post: null,
 error: null
 }
 },
 created () {
 // 組件創建完后獲取數據，
 // 此時 data 已經被 observed 了
 this.fetchData()
 },
 watch: {
 // 如果路由有變化，會再次執行該方法
 '$route': 'fetchData'
 },
 methods: {
 fetchData () {
 this.error = this.post = null
 this.loading = true
 // replace getPost with your data fetching util / API wrapper
 getPost(this.$route.params.id, (err, post) => {
 this.loading = false
 if (err) {
 this.error = err.toString()
 } else {
 this.post = post
 }
 })
 }
 }
}

在導航完成前獲取數據

通過這種方式，我們在導航轉入新的路由前獲取數據。我們可以在接下來的組件的 beforeRouteEnter 守衛中獲取數據，當數據獲取成功后只調用 next 方法。

export default {
 data () {
 return {
 post: null,
 error: null
 }
 },
 beforeRouteEnter (to, from, next) {
 getPost(to.params.id, (err, post) => {
 next(vm => vm.setData(err, post))
 })
 },
 // 路由改變前，組件就已經渲染完了
 // 邏輯稍稍不同
 beforeRouteUpdate (to, from, next) {
 this.post = null
 getPost(to.params.id, (err, post) => {
 this.setData(err, post)
 next()
 })
 },
 methods: {
 setData (err, post) {
 if (err) {
 this.error = err.toString()
 } else {
 this.post = post
 }
 }
 }
}

在為后面的視圖獲取數據時，用戶會停留在當前的界面，因此建議在數據獲取期間，顯示一些進度條或者別的指示。如果數據獲取失敗，同樣有必要展示一些全局的錯誤提醒。

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

vue-router使用總結（附代碼）

推薦度：

點擊下載本文 文檔為doc格式

標簽：使用 VUE 代碼

熱門焦點

vue-router使用總結（附代碼）

vue-router使用總結（附代碼）

vue-router使用總結（附代碼）

最新推薦

猜你喜歡

熱門推薦