Vue 3.0使用router

一、简介

Vue 很适合用来构建单页面应用。对于大多数此类应用，都推荐使用官方支持的Vue Router；在单页面应用(Single-page application）中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，因为这类场景下用户通常会在很长的一段时间中做出多次交互。这类的单页面应用中，路由的更新是在客户端执行的。

Vue Router 是 Vue 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

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

二、Vue Router的使用

2.1 安装

在Vue3中，我们推荐使用vue-router 4.x及以上版本。

npm install vue-router@4

2.2 引入

在我们的前端工程中，路由一般需要单独管理，以便后续的管理和维护。在此基础上，我们将引入分为两个步骤,即：

1. 创建统一管理路由入口文件
2. 引入使用路由入口文件

2.2.1 创建统一管理路由的入口文件

在main.ts(js)同级的目录上创建 router 文件夹，并添加index.ts文件，index.ts文件内容如下:

import {
   
    createRouter, createWebHistory, RouteRecordRaw } fro