Vue3和Vue-Router的全方位探索

一、Vue3新特性

Vue3是在Vue2的基礎之上進行重構，優化了性能和開發體驗。以下是Vue3的幾個新特性：

1、Composition API

Composition API是Vue3中的新特性，它可以讓你更好地封裝邏輯代碼，提高代碼可復用性和可測試性。

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({  // 響應式數據
      count: 0,
      increment() { state.count++ }
    })

    return { state }
  }
}

2、Teleport

Teleport可以讓你把彈出框、提示框等組件掛載到body下的任意位置，使得你可以脫離當前組件的局限性，更好地控制彈出框的位置和行為。

<template>
  <teleport to="body">
    <div class="modal">
      ...
    </div>
  </teleport>
</template>

3、靜態屬性提升

靜態屬性提升是在編譯階段對模板進行靜態分析，把靜態屬性提升到外層作用域中，這樣可以減小渲染時對虛擬DOM的處理，提高渲染性能。

二、Vue-Router

Vue-Router是Vue.js官方的路由管理器。它可以幫助我們完成前端頁面的路由控制，實現單頁應用。

1、基礎使用

以下是Vue-Router的基礎使用方法，通過路由表配置path、component和name，實現不同路徑與不同組件的映射關係。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home, name: 'Home' },
  { path: '/about', component: About, name: 'About' },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

2、動態路由

動態路由是通過把路由參數添加到path中來實現的，這使得我們能夠根據動態參數來渲染不同的組件。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import PostDetail from './views/PostDetail.vue'

const routes = [
  { path: '/post/:id', component: PostDetail, name: 'PostDetail' },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

3、路由傳參

通過props傳參，我們可以讓目標組件接收到一些額外的數據，使得目標組件更加靈活、可復用。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import PostDetail from './views/PostDetail.vue'

const routes = [
  { path: '/post/:id', component: PostDetail, name: 'PostDetail', props: true },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// PostDetail.vue
<template>
  <div>
    <h2>{{ post.title }}</h2>
    <p>{{ post.content }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: { type: String, required: true },
  },
  computed: {
    post() {
      // 通過id從數據庫中獲取post數據
      return fetchPost(this.id)
    }
  }
}
</script>

4、編程式導航

編程式導航是通過JS代碼來實現路由跳轉的方式，常用於異步加載數據後的後續頁面跳轉。

// 編程式導航
router.push({ path: '/about' })

// 帶參數的編程式導航
router.push({ name: 'PostDetail', params: { id: '1' } })

三、Vue3和Vue-Router的結合

1、路由配置的變化

在Vue3中，我們需要使用createRouter函數來創建路由實例，然後使用use函數把它掛載到Vue應用中。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home, name: 'Home' },
  { path: '/about', component: About, name: 'About' },
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

2、路由守衛的變化

在Vue3中，路由守衛的使用方式並未發生太大的變化，我們仍然可以使用beforeEach、beforeResolve、afterEach等方法來進行路由守衛的操作。

router.beforeEach((to, from, next) => {
  // 進行一些驗證或者跳轉邏輯
  next()
})

3、transition組件的變化

transition組件是Vue2中用來實現頁面過渡效果的組件，Vue3中的transition組件可以通過appear、enter、leave等鉤子函數，來實現更加靈活的過渡效果。

<transition name="fade">
  <router-view></router-view>
</transition>

.fade-enter-active,
.fade-leave-active { transition: opacity .5s; }
.fade-enter,
.fade-leave-to { opacity: 0; }

四、總結

Vue3和Vue-Router是目前比較流行的前端開發框架，它們的結合可以讓我們輕鬆地實現前端路由控制和頁面組件化開發。我們要善於挖掘新特性，充分利用Vue3和Vue-Router的優勢，提高我們的開發效率和代碼質量。