3. Vue Router4 基础用法

1. 路由的定义和使用

在 Vue Router4 中，路由的定义和使用是非常直观和简单的。每一个路由都是一个对象，包含 path 和 component 这两个属性。path 属性表示路由的路径，component 属性表示路由对应的组件。

以下是一个简单的路由定义示例：

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

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

在这个示例中，我们定义了两个路由，分别对应 Home 和 About 这两个组件。当用户访问 / 路径时，Home 组件会被渲染；当用户访问 /about 路径时，About 组件会被渲染。

路由的使用主要通过两种方式：声明式导航和编程式导航。

声明式导航

声明式导航是通过 router-link 组件来实现的。你可以通过 to 属性来指定路由的路径，当用户点击这个链接时，就会导航到对应的路由。

以下是一个声明式导航的示例：

<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>

在这个示例中，我们定义了两个链接，分别指向 / 和 /about 这两个路由。当用户点击这些链接时，就会导航到对应的路由。

编程式导航

编程式导航是通过路由器对象的 push 方法来实现的。你可以将路由的路径作为参数传递给 push 方法，当这个方法被调用时，就会导航到对应的路由。

以下是一个编程式导航的示例：

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

在这个示例中，我们调用了路由器对象的 push 方法，分别导航到 / 和 /about 这两个路由。

以上就是 Vue Router4 中路由的定义和使用的基础知识。在接下来的章节中，我们将深入学习 Vue Router4 的动态路由和嵌套路由等高级特性