Vue路由官方文件學習筆記

Vue路由官方文件學習筆記

Vue是一個易於上手的漸進式JavaScript框架，它可以幫助我們更方便、快速地建立單頁應用程式（SPA）。其中，Vue Router是Vue中的一個非常重要的元件，主要用於管理整個應用程式的路由。本文將介紹Vue路由官方文件的學習筆記。

一、Vue Router入門

首先，我們需要透過npm或yarn安裝Vue Router:

npm install vue-router

yarn add vue-router

然後，我們在main.js中引入Vue Router並將其掛載：

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
    path: '/',
    component: Home
  }]
})

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

其中，我們透過Vue.use()方法將Vue Router註冊到Vue中，然後建立了一個新的VueRouter實例，並且設定了路由規則。在最後，我們把VueRouter實例掛載到Vue實例上。

接下來，我們需要為路由規則設定對應的元件，例如：

import Home from './views/Home.vue'
import About from './views/About.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在上面的程式碼中，我們引入了Home和About元件，並在路由規則中使用了它們。當存取根路徑時，會渲染Home元件，而當存取/about路徑時，則會渲染About元件。

二、路由跳轉

在使用Vue Router的過程中，我們常常會需要進行路由跳轉。 Vue Router提供了多種方式來實現路由跳轉，例如：

1.透過$route物件實現

我們可以在元件中透過$route物件來實現路由跳轉，例如：

this.$router.push('/about')

2.透過$route.linkActive class實作

當我們在頁面中需要為目前選取的路由新增一個特定的樣式時，可以使用$route.linkActive class。例如：

<router-link to="/" tag="li" active-class="active">Home</router-link>
<router-link to="/about" tag="li" active-class="active">About</router-link>

在上面的程式碼中，噹噹前路由和指定路由匹配時，會為該路由元素新增active樣式。

3.透過編程式導航實作

在某些情況下，我們需要在JavaScript程式碼中進行路由跳轉，例如表單提交後跳到指定頁面。此時，可以使用編程式導航來實現路由跳轉，例如：

// 使用命名路由跳转
this.$router.push({ name: 'about' })
  
// 使用路由参数跳转
this.$router.push({ path: '/user/123' })

三、路由元件傳遞參數

在實際開發中，我們經常需要將一些參數從一個路由元件傳遞到另一個路由組件。 Vue Router提供了多種方式來實現路由元件傳遞參數，例如：

1.透過$route物件實現

當我們需要在路由元件中取得路由參數時，可以使用$ route.params對象，例如：

// 定义路由规则
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

// 在组件中获取路由参数
export default {
  methods: {
    goToUser(id) {
      // 参数传递方式1
      this.$router.push('/user/' + id)
      
      // 参数传递方式2
      this.$router.push({ path: '/user/' + id })
      
      // 参数传递方式3
      this.$router.push({ name: 'user', params: { id }})
    }
  }
}

// User组件中获取路由参数
export default {
  created() {
    const id = this.$route.params.id
  }
}

2.透過query參數實現

query參數是一種比較靈活的傳參方式，它可以將參數直接拼接在URL後面進行傳遞，例如：

this.$router.push({
  path: '/user',
  query: { id: 123 }
})

// User组件中获取query参数
export default {
  created() {
    const id = this.$route.query.id
  }
}

四、路由鉤子函數

Vue Router提供了多種路由鉤子函數，可以幫助我們在路由變更時執行不同的操作。例如，我們可以在進入元件之前檢查使用者登入狀態，或在路由變更時進行頁面跳轉等操作。

1.全域路由鉤子函數

全域路由鉤子函數會在整個應用程式中的路由變更時觸發，例如：

const router = new VueRouter({
  routes: [...],
})

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 判断用户是否登录
  if (to.meta.requireAuth && !store.state.isUserLogin) {
    next({ path: '/login' })
  } else {
    next()
  }
})

// 全局后置钩子
router.afterEach((to, from) => {
  // 页面跳转统计
  statistics(to.path)
})

在上面的程式碼中，我們透過router.beforeEach()方法定義了一個全域前置守衛，用於判斷使用者是否登錄，如果未登入則跳到登入頁面。在全域後置鉤子中可以進行一些統計或其他操作。

2.元件內路由鉤子函數

除了全域路由鉤子函數，Vue Router也提供了一些元件內的路由鉤子函數，例如beforeRouteEnter、beforeRouteLeave和beforeRouteUpdate。例如，我們可以在beforeRouteEnter鉤子函數中取得元件實例並進行一些初始化操作，例如：

export default {
  beforeRouteEnter(to, from, next) {
    // 获取组件实例
    const vm = this
    
    // 发起异步请求
    getAsyncData().then(response => {
      // 将数据保存到组件的data中
      vm.data = response.data
      
      // 继续路由跳转
      next()
    })
  }
}

在上面的程式碼中，我們在元件進入路由時觸發了beforeRouteEnter鉤子函數，在取得非同步資料後將資料儲存到元件的data中，並透過next()方法繼續路由跳轉。

總結：

本文主要介紹了Vue Router官方文件的學習筆記，包括Vue Router的入門、路由跳躍、路由元件傳遞參數和路由鉤子函數等方面。希望對大家在Vue開發中使用Vue Router有幫助。

以上是Vue路由官方文件學習筆記的詳細內容。更多資訊請關注PHP中文網其他相關文章！