Vue + Router + TS 使用

type

status

date

slug

summary

官网

The official router for Vue.js. Define static and dynamic routes with an intuitive and powerful syntax. Intercept any navigation and precisely control its outcome. Map each route to the component that should display. Choose between HTML5, Hash or Memory history modes. Precisely control the scroll position in every page.

https://router.vuejs.org/

构建项目

安装

使用vue安装可以直接安装router，vite不包含，需要自行安装

安装 vue-router

创建使用路由 /src/router/index.ts

两个路由组件：

router-link

跳转路由

router-view

显示与url对应的组件

最后挂载到app上

导航 — 跳转

命名路由

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

没有硬编码的 URL

params 的自动编码/解码。

防止你在 url 中出现打字错误。

绕过路径排序（如显示一个）

使用方式：

编程式导航

通过编写代码来实现

历史记录

replace

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件

前进 — 后退

路由传参

Query

编程式导航使用router push 或者 replace 的时候改为对象形式新增query 必须传入一个对象

接收参数：

使用 useRoute 的 query

Params

编程式导航使用router push 或者 replace 的时候改为对象形式并且只能使用name，path无效，然后传入params

接收参数：

使用 useRoute 的 params

二者的区别

query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效

query 在路由配置不需要设置参数，而 params 必须设置

query 传递的参数会显示在地址栏中

params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;

路由配置

动态路由传参

在路径中使用一个动态字段来实现，我们称之为 路径参数

路径参数用冒号 :表示。当一个路由被匹配时，它的 params的值将在每个组件

先在 router/index.ts 中定义

再在路由传参时存入

嵌套路由

children配置只是另一个路由数组，就像 routes本身一样。因此，你可以根据自己的需要，不断地嵌套视图

注意：之后跳转的时候子路由的路径要写全（如 /user/reg ）

命名视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default

同个路由配置多个视图组件，使用 components

对应Router-view

重定向 & 别名

redirect

字符串形式

对象形式

函数形式

alias

将 / 别名为 /root ，意味着当用户访问 /root 时，URL 仍然是 /user，但会被匹配为用户正在访问 /

导航守卫

前置守卫

router.beforeEach

后置守卫

router.afterEach

使用场景一般可以用来做loadingBar

路由元信息

通过路由记录的 meta属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据

例如：

权限校验标识。

路由组件的过渡名称。

路由组件持久化缓存 (keep-alive) 的相关配置。

标题名称

通过 route.meta 来获取当前路由元信息

TS提示

如果不使用扩展将会是 unknow 类型

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior方法

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

scrollBehavior 返回滚动位置的对象信息，长这样：

{ left: number, top: number }

动态路由

我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)

主要使用的方法就是 router.addRoute （从后台那路由表在添加到路由中）

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配, 就需要你用 router.push() 或router.replace() 来手动导航，才能显示该新路由

删除路由

有几个不同的方法来删除现有的路由：

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

通过调用 router.addRoute()返回的回调：（当路由没有名称时，这很有用）

通过使用 router.removeRoute()按名称删除路由：

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol作为名字

查看现有路由

router.hasRoute()：检查路由是否存在。

router.getRoutes()：获取一个包含所有路由记录的数组。

参考链接：

(22条消息) vue-router_小满zs的博客-CSDN博客

官网