Vue.js 路由管理利器——Vue Router 4

2024-02-09 13:20:14

当然，以下是关于 vue-router 4 版本的学习笔记：

前言

随着前端技术的发展，单页应用程序（SPA）越来越受到欢迎。SPA 将整个应用程序的内容都加载到一个页面中，然后通过路由来管理不同页面的切换。这样不仅可以减少页面的加载时间，还可以提高用户体验。

Vue Router 是 Vue.js 官方的路由管理器，它提供了一系列强大的特性，如动态路由、嵌套路由、路由守卫等，帮助开发人员轻松构建单页应用程序。

安装和配置

首先，我们需要在项目中安装 Vue Router：

npm install vue-router@4

然后，在 main.js 文件中引入 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  // 路由配置
})

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

基本用法

Vue Router 的基本用法非常简单，只需要在 router 对象中配置好路由表即可。路由表是一个数组，每个元素是一个路由对象，路由对象包含以下属性：

path：路由的路径，可以是字符串或正则表达式。
component：路由对应的组件。
name：路由的名称，可选。
redirect：路由的重定向，可选。
props：传递给组件的属性，可选。

例如，以下是一个简单的路由表：

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

这个路由表定义了两个路由：一个是根路由（path 为 /），另一个是关于页面的路由（path 为 /about）。当用户访问根路由时，将加载 Home 组件；当用户访问关于页面的路由时，将加载 About 组件。

动态路由

Vue Router 还支持动态路由，即路由的路径可以根据某些参数而改变。例如，以下是一个动态路由：

{
  path: '/user/:id',
  component: User
}

这个路由的路径为 /user/:id，其中 :id 是一个参数。当用户访问这个路由时，将加载 User 组件，并且 User 组件将收到一个 id 参数，该参数的值为用户在 URL 中输入的 ID。

嵌套路由

Vue Router 还支持嵌套路由，即在一个路由中嵌套另一个路由。例如，以下是一个嵌套路由：

{
  path: '/user',
  component: User,
  children: [
    {
      path: 'profile',
      component: UserProfile
    },
    {
      path: 'settings',
      component: UserSettings
    }
  ]
}

这个路由的路径为 /user，它包含了两个子路由：一个是用户简介页面的路由（path 为 profile），另一个是用户设置页面的路由（path 为 settings）。当用户访问用户简介页面的路由时，将加载 UserProfile 组件；当用户访问用户设置页面的路由时，将加载 UserSettings 组件。