vue文档摘录九：Vue Router

军军君01

已于 2022-02-28 09:46:51 修改

阅读量1.4k

点赞数

分类专栏： # VUE文档摘录前端知识学习合集文章标签： vue.js 学习 javascript

于 2022-02-22 19:07:17 首次发布

本文链接：https://blog.csdn.net/m0_37631110/article/details/123074450

版权

前端知识学习合集同时被 2 个专栏收录

40 篇文章 7 订阅

订阅专栏

VUE文档摘录

9 篇文章 0 订阅

订阅专栏

参考文档：Vue Router

路由管理，通过Vue Router实现网站的路由管理。

简单的示例：

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
  </body>
</html>

main.js

import { createApp } from 'vue'
import { createRouter,createWebHashHistory } from "vue-router";
import App from './App.vue'
import Home from './Home.vue'
import About from './About.vue'

// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes, // `routes: routes` 的缩写
})
export default router;
// 5. 创建并挂载根实例
const app = createApp(App);
//确保 _use_ 路由实例使
//整个应用支持路由。
app.use(router)
app.mount('#app')

App.vue

<template>
	<div id="app">
		<router-view />
	</div>
</template>

<script>
	export default {
		name: 'App',
	}
</script>

<style>
</style>

Home.vue

<script setup>
</script>

<template>
	首页
</template>

<style>

</style>

About.vue

<template>
	关于我们界面
</template>

<script>
</script>

<style>
</style>

实现效果：

`常用组件及方法说明： <router-link>`

类似a标签，请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。

`<router-view>`

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

createRouter方法：

创建一个可以被 Vue 应用程序使用的路由实例。查看 RouterOptions 中的所有可以传递的属性列表。

函数签名：
export declare function createRouter(options: RouterOptions): Router
参数#

参数类型描述
options RouterOptions Options 用来初始化 router

参数	类型	描述
options	RouterOptions	Options 用来初始化 router

createWebHistory方法：

创建一个 HTML5 历史，即单页面应用程序中最常见的历史记录。应用程序必须通过 http 协议被提供服务。

函数签名：
export declare function createWebHistory(base?: string): RouterHistory
参数#

参数类型描述
base string 提供的可选 base。当应用程序被托管在诸如 https://example.com/folder/ 之类的文件夹中时非常有用。

示例#
createWebHistory() // 没有 base，应用托管在域名 `https://example.com` 的根目录下。
createWebHistory('/folder/') // 给出的网址为 `https://example.com/folder/`

参数	类型	描述
base	`string`	提供的可选 base。当应用程序被托管在诸如 `https://example.com/folder/` 之类的文件夹中时非常有用。

createWebHashHistory方法：

创建一个 hash 历史记录。对于没有主机的 web 应用程序 (例如 file://)，或当配置服务器不能处理任意 URL 时这非常有用。注意：如果 SEO 对你很重要，你应该使用 createWebHistory。

函数签名：
export declare function createWebHashHistory(base?: string): RouterHistory
参数#

参数类型描述
base string 提供可选的 base。默认是 location.pathname + location.search。如果 head 中有一个 <base>，它的值将被忽略，而采用这个参数。但请注意它会影响所有的 history.pushState() 调用，这意味着如果你使用一个 <base> 标签，它的 href 值必须与这个参数相匹配 (请忽略 # 后面的所有内容)

参数	类型	描述
base	`string`	提供可选的 base。默认是 `location.pathname + location.search`。如果 `head` 中有一个 `<base>`，它的值将被忽略，而采用这个参数。但请注意它会影响所有的 history.pushState() 调用，这意味着如果你使用一个 `<base>` 标签，它的 `href` 值必须与这个参数相匹配 (请忽略 `#` 后面的所有内容)

createMemoryHistory方法：

创建一个基于内存的历史记录。这个历史记录的主要目的是处理 SSR。它在一个特殊的位置开始，这个位置无处不在。如果用户不在浏览器上下文中，它们可以通过调用 router.push() 或 router.replace() 将该位置替换为启动位置。

函数签名：
export declare function createMemoryHistory(base?: string): RouterHistory
参数#

参数类型描述
base string Base 适用于所有 URL，默认为'/'

Returns#

一个可以传递给路由构造函数的历史对象。

参数	类型	描述
base	`string`	Base 适用于所有 URL，默认为'/'

NavigationFailureType标识：

NavigationFailureType#

包含所有可能导航失败类型的枚举，可以传递给 isNavigationFailure 来检查某些特定类型的失败。不要使用任何数值，总是使用诸如 NavigationFailureType.aborted 这样的变量。

函数签名：
export declare enum NavigationFailureType
成员#

成员值描述
aborted 4 终止导航是指由于导航守卫返回 false 或调用 next(false) 而失败的导航。
cancelled 8 取消导航是指由于最近的导航完成启动（不一定是完成）而失败的导航。
duplicated 16 重复导航是指在启动时已经在同一位置失败的导航。

成员	值	描述
aborted	4	终止导航是指由于导航守卫返回 `false` 或调用 `next(false)` 而失败的导航。
cancelled	8	取消导航是指由于最近的导航完成启动（不一定是完成）而失败的导航。
duplicated	16	重复导航是指在启动时已经在同一位置失败的导航。

onBeforeRouteLeave

添加一个导航守卫，在当前位置的组件将要离开时触发。类似于 beforeRouteLeave，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

函数签名：
export declare function onBeforeRouteLeave(leaveGuard: NavigationGuard): void
参数#

参数类型描述
leaveGuard NavigationGuard 要添加的导航守卫

参数	类型	描述
leaveGuard	NavigationGuard	要添加的导航守卫

onBeforeRouteUpdate

添加一个导航守卫，在当前位置即将更新时触发。类似于 beforeRouteUpdate，但它可以在任何组件中使用。当组件被卸载时，导航守卫将被移除。

函数签名：
export declare function onBeforeRouteUpdate(updateGuard: NavigationGuard): void
参数#

参数类型描述
updateGuard NavigationGuard 要添加的导航守卫

参数	类型	描述
updateGuard	NavigationGuard	要添加的导航守卫

useLink

返回 v-slot API 暴露的所有内容。

函数签名：
export declare function useLink(props: RouterLinkOptions): {
  route: ComputedRef<RouteLocationNormalized & { href: string }>,
  href: ComputedRef<string>,
  isActive: ComputedRef<boolean>,
  isExactActive: ComputedRef<boolean>,
  navigate: (event?: MouseEvent) => Promise(NavigationFailure | void),
}
参数#

参数类型描述
props RouterLinkOptions props 对象可以传递给<router-link>。接收 Ref 和 ComputedRef

参数	类型	描述
props	`RouterLinkOptions`	props 对象可以传递给`<router-link>`。接收 `Ref` 和 `ComputedRef`

useRoute

返回当前路由地址。相当于在模板中使用 $route。必须在 setup() 中调用。

函数签名：
export declare function useRoute(): RouteLocationNormalized

useRouter

返回 router 实例。相当于在模板中使用 $router。必须在 setup() 中调用。

函数签名：
export declare function useRouter(): Router

Router 方法：

addRoute

添加一条新的路由记录作为现有路由的子路由。如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。

函数签名：
addRoute(parentName: string | symbol, route: RouteRecordRaw): () => void
参数

参数类型描述
parentName string | symbol 父路由记录，route 应该被添加到的位置
route RouteRecordRaw 要添加的路由记录

参数	类型	描述
parentName	`string \| symbol`	父路由记录，`route` 应该被添加到的位置
route	RouteRecordRaw	要添加的路由记录

addRoute

添加一条新的路由记录到路由。如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。

函数签名：
addRoute(route: RouteRecordRaw): () => void
参数

参数类型描述
route RouteRecordRaw 要添加的路由记录

提示

请注意，添加路由并不会触发新的导航。也就是说，除非触发新的导航，否则不会显示所添加的路由。

参数	类型	描述
route	RouteRecordRaw	要添加的路由记录

afterEach

添加一个导航钩子，在每次导航后执行。返回一个删除注册钩子的函数。

函数签名：
afterEach(guard: NavigationHookAfter): () => void
参数

参数类型描述
guard NavigationHookAfter 要添加的导航钩子

参数	类型	描述
guard	`NavigationHookAfter`	要添加的导航钩子

back

如果可能的话，通过调用 history.back() 回溯历史。相当于 router.go(-1)。

函数签名：
back(): void

beforeEach

添加一个导航守卫，在任何导航前执行。返回一个删除已注册守卫的函数。

函数签名：
beforeEach(guard: NavigationGuard): () => void
参数

参数类型描述
guard NavigationGuard 要添加的导航守卫

参数	类型	描述
guard	NavigationGuard	要添加的导航守卫

beforeResolve

添加一个导航守卫，在导航即将解析之前执行。在这个状态下，所有的组件都已经被获取，并且其他导航守卫也已经成功。返回一个删除已注册守卫的函数。

函数签名：
beforeResolve(guard: NavigationGuard): () => void
参数

参数类型描述
guard NavigationGuard 要添加的导航守卫

参数	类型	描述
guard	NavigationGuard	要添加的导航守卫

forward

如果可能的话，通过调用 history.forward() 在历史中前进。相当于 router.go(1)。

函数签名：
forward(): void

getRoutes

获取所有路由记录的完整列表。

函数签名：
getRoutes(): RouteRecord[]

go

允许你在历史中前进或后退。

函数签名：
go(delta: number): void
参数

参数类型描述
delta number 相对于当前页面，你要移动到的历史位置

参数	类型	描述
delta	`number`	相对于当前页面，你要移动到的历史位置

hasRoute

确认是否存在指定名称的路由。

函数签名：
hasRoute(name: string | symbol): boolean
参数

参数类型描述
name string | symbol 要确认的路由名称

参数	类型	描述
name	`string \| symbol`	要确认的路由名称

isReady

当路由器完成初始化导航时，返回一个 Promise，这意味着它已经解析了所有与初始路由相关的异步输入钩子和异步组件。如果初始导航已经发生了，那么 promise 就会立即解析。这在服务器端渲染中很有用，可以确保服务器和客户端的输出一致。需要注意的是，在服务器端，你需要手动推送初始位置，而在客户端，路由器会自动从 URL 中获取初始位置。

函数签名：
isReady(): Promise<void>

onError

添加一个错误处理程序，在导航期间每次发生未捕获的错误时都会调用该处理程序。这包括同步和异步抛出的错误、在任何导航守卫中返回或传递给 next 的错误，以及在试图解析渲染路由所需的异步组件时发生的错误。

函数签名：
onError(handler: (error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any): () => void
参数

参数类型描述
handler (error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any error handler to register

参数	类型	描述
handler	`(error: any, to: RouteLocationNormalized, from: RouteLocationNormalized) => any`	error handler to register

push

通过在历史堆栈中推送一个 entry，以编程方式导航到一个新的 URL。

函数签名：
push(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
参数

参数类型描述
to RouteLocationRaw 要导航到的路由地址

参数	类型	描述
to	RouteLocationRaw	要导航到的路由地址

removeRoute

通过名称删除现有路由。

函数签名：
removeRoute(name: string | symbol): void
参数

参数类型描述
name string | symbol 要删除的路由名称

参数	类型	描述
name	`string \| symbol`	要删除的路由名称

replace

通过替换历史堆栈中的当前 entry，以编程方式导航到一个新的 URL。

函数签名：
replace(to: RouteLocationRaw): Promise<NavigationFailure | void | undefined>
参数

参数类型描述
to RouteLocationRaw 要导航到的路由地址

参数	类型	描述
to	RouteLocationRaw	要导航到的路由地址

resolve

返回路由地址的标准化版本。还包括一个包含任何现有 base 的 href 属性。

函数签名：
resolve(to: RouteLocationRaw): RouteLocation & {
  href: string
}
参数

参数类型描述
to RouteLocationRaw 要解析的原始路由地址