Vue3.0全家桶之vue-router@4.x实战

前端

2023-09-14 12:16:49

序言

在上一篇文章中，我们详细介绍了Vue3.0的新特性，想必大家已经对Vue3.0有了初步的认识。本篇将继续我们的Vue3.0全家桶系列文章，带大家深入探索Vue3.0中不可或缺的一员——vue-router@4.x。

Vue-router@4.x概述

Vue-router是Vue.js官方提供的路由解决方案，它主要用于构建单页面应用（SPA）。在SPA中，整个应用只有一个页面，通过路由来控制页面的切换，从而实现无刷新跳转。

与Vue2.0相比，vue-router@4.x进行了全面的重构和优化，带来了许多新特性和改进，包括：

基于composables的API： 提供了更灵活、更具可组合性的API，使路由管理更加方便。
集成Vue3.0的新特性： 充分利用Vue3.0的响应式特性和Composition API，提升路由体验。
更好的代码分割支持： 优化了代码分割机制，减小了初始加载时间。
更强大的路由守卫： 提供了更完善的路由守卫系统，增强了应用的安全性。

Vue-router@4.x实战

接下来，我们通过一个实战案例来深入了解vue-router@4.x的使用。我们将创建一个简单的博客应用，包含文章列表和文章详情两个页面。

1. 创建Vue3.0项目

vue create my-blog-app

2. 安装vue-router@4.x

npm install vue-router@4

3. 创建路由配置

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import ArticleList from '../components/ArticleList.vue'
import ArticleDetail from '../components/ArticleDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: ArticleList
  },
  {
    path: '/article/:id',
    component: ArticleDetail
  }
]

const router = new VueRouter({
  routes
})

export default router

4. 注册路由

// main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

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

5. 使用路由

// App.vue
<template>
  <RouterView />
</template>

<script>
export default {
  name: 'App'
}
</script>

// ArticleList.vue
<template>
  <ul>
    <li v-for="article in articles" :key="article.id">
      <router-link :to="'/article/' + article.id">{{ article.title }}</router-link>
    </li>
  </ul>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ArticleList',
  setup() {
    const articles = ref([
      { id: 1, title: '文章1' },
      { id: 2, title: '文章2' },
      { id: 3, title: '文章3' }
    ])

    return {
      articles
    }
  }
}
</script>

// ArticleDetail.vue
<template>
  <h1>{{ article.title }}</h1>
  <p>{{ article.content }}</p>
</template>

<script>
import { ref } from 'vue'

export default {
  name: 'ArticleDetail',
  props: ['id'],
  setup(props) {
    const article = ref({
      title: '',
      content: ''
    })

    fetch(`/api/article/${props.id}`)
      .then(res => res.json())
      .then(data => {
        article.value = data
      })

    return {
      article
    }
  }
}
</script>