Vue.js 入门之 vue-router，功能强大，用例丰富，你不可不知

前端

2022-12-14 04:02:40

VueRouter：单页面应用程序的路由利器

了解 VueRouter

在单页面应用程序（SPA）中，路由是关键，因为它允许用户在不重新加载整个页面的情况下在不同的视图之间切换。Vue.js 官方路由库 VueRouter 应运而生，为 Vue.js 应用程序提供了轻量级且灵活的路由解决方案。

标签式与函数式 API

VueRouter 提供两种常用的 API：

标签式 API： 通过 <router-link> 和 <router-view> 标签，可以在 Vue 组件中管理路由。对于小型和中型应用程序来说，这是最简单和最常用的方式。
函数式 API： 使用 createRouter() 和 createWebHistory() 函数在 JavaScript 中创建和配置路由器。这是一种更灵活的方法，特别适用于大型和复杂的应用程序。

内部命名规范

VueRouter 使用了一套特定的内部命名规范：

$route：当前激活的路由对象。
$router：路由器实例。
$routeParams：当前路由的参数对象。
$routeQuery：当前路由的查询参数对象。
$routeName：当前路由的名称。

此外，还提供了一系列辅助函数，如 $router.push()、$router.replace() 和 `$router.go()。

代码示例

以下是一个使用 VueRouter 的示例：

// 使用标签式 API
<template>
  <div>
    <router-link to="/home">主页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
});

export default router;
</script>