Vue3 vue-router 4.x 安装配置与核心API使用指南

1 介绍

Vue非常适合用于构建单页面应用（SPA）。在大多数此类应用场景中，官方推荐的Vue Router是首选方案。在单页面应用中，客户端JavaScript可以拦截页面的跳转请求，动态获取新数据，并在不重新加载页面的情况下更新当前视图。这种方式通常能提供更流畅的用户体验，因为用户往往会在较长时间内进行多次交互。在此类应用中，路由更新完全在客户端执行。

Vue Router是Vue.js的官方路由库，它与Vue核心深度集成，使得构建单页面应用变得简单。其主要功能包括：

嵌套路由映射
动态路由选择
模块化、基于组件的路由配置
路由参数、查询、通配符
展示由Vue.js的过渡系统提供的过渡效果
细致的导航控制
自动激活CSS类的链接
HTML5 history模式或hash模式
可定制的滚动行为
URL的正确编码

接下来我们将介绍Vue Router的基本使用方法。

2 Vue Router的使用

2.1 安装

对于Vue3项目，推荐使用vue-router 4.x或更高版本。在Node环境下，安装命令如下：

npm install vue-router@4

2.2 引入

在工程项目中，通常将路由文件单独管理，以便于后续的使用和维护。基于此原则，引入过程分为两步：

创建统一管理路由入口文件
在vue项目中引入并使用该路由入口文件

2.2.1 创建路由文件

在与main.ts文件同级目录下创建router文件夹，并添加index.ts文件（若使用JS则同理）。

文件内容如下：

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
// 项目其他页面路由（推荐使用）
import Practice from "../router/practiceFolder/practice";
// vue项目自带路由
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home
  },
  {
    path: "/about",
    name: "About",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue")
  }
];
const routers = [...routes, ...Practice];
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [...routes, ...Practice]
});
export default router;

其中，使用RouteRecordRaw声明的对象被视为路由对象，并放入路由对象池中。

createRouter用于创建路由实例；

createWebHistory代表路由使用HTML5模式，这也是官方推荐的模式；

2.2.2 main.ts 引入

代码如下：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

2.3 使用

2.3.1 router-view使用

引入后，我们可以在单页面应用的app.vue中配置使用router-view来切换页面，代码如下：

<template>
  <router-view v-slot="{ Component }">
  </router-view>
</template>

引入之后，在Vue实例中，你可以通过$router访问路由实例。若想要导航到不同的URL，使用this.$router.push(...)进行跳转。

详细的router-view使用方法可见vue router-view使用详解

2.3.2 router-link使用

当使用<router-link>时，内部会调用router.push(...)方法，因此点击<router-link :to="...">相当于调用router.push(...)。

2.3.3 在setup中访问路由和当前路由

由于在setup中没有访问this，因此不能再直接访问this.$router或this.$route。作为替代，我们使用useRouter和useRoute函数：

import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    function pushWithQuery(query) {
      router.push({
        name: 'about',
        query: {
          ...route.query,
        },
      })
    }
  },
}

2.4 其他API

除以上介绍的Vue Router基本API外，还有如下API可供使用：

NavigationFailureType: 导航失败类型
START_LOCATION: 默认开始位置
createMemoryHistory: 使用记忆历史模式
createRouterMatcher:
createWebHashHistory: 创建哈希模式
createWebHistory: 创建html5模式
isNavigationFailure: 导航是否失败
onBeforeRouteLeave: 导航守卫，在setup中使用，在当前位置的组件将要离开时触发。
onBeforeRouteUpdate: 导航守卫，在setup中使用，在当前位置即将更新时触发。
parseQuery: 解析query参数
stringifyQuery: 字符串query参数
useLink: 将RouterLink的内部行为作为一个组合式API函数公开。
useRoute: 替代this.$route
useRouter: 替代this.$router

本文参考官网，进行了vue3路由配置的实际操作，更加全面的使用请参考官网vue router。

到此这篇关于Vue3中vue-router的使用方法详解的文章就介绍到这了,更多相关Vue3 vue-router内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

Vue3中vue-router的使用方法详解