Vue-Router

介绍

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

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

Vue Router 是 Vue 官方的客户端路由解决方案。

客户端路由的作用是在单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。
Vue Router 基于 Vue 的组件系统构建，你可以通过配置路由来告诉 Vue Router 为每个 URL 路径显示哪些组件。

1. 入门

创建和注册路由

定义路由

javascript

import { createMemoryHistory, createRouter } from "vue-router";

import HomeView from "./HomeView.vue";
import AboutView from "./AboutView.vue";

const routes = [
  { path: "/", component: HomeView },
  { path: "/about", component: AboutView },
];

const router = createRouter({
  history: createMemoryHistory(),
  routes,
});

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是先前在 App.vue 中被 <RouterView> 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。
其他可以设置的路由选项我们会在之后介绍，目前我们只需要 path 和 component。
这里的 history 选项控制了路由和 URL 路径是如何双向映射的。在演练场的示例里，我们使用了 createMemoryHistory()，它会完全忽略浏览器的 URL 而使用其自己内部的 URL。这在演练场中可以正常工作，但是未必是你想要在实际应用中使用的。通常，你应该使用 createWebHistory() 或 createWebHashHistory()。我们将在不同的历史记录模式的部分详细介绍这个主题。

注册路由插件

javascript

const app = createApp();
app.use(router);
app.mount("#app");

和大多数的Vue插件一样，use()需要在mount()之前调用。这个插件做了：
- 全局注册：RouterView和RouterLink组件。
- 添加全局：$router和$route属性。
- 启用：useRouter()和useRoute()组合式函数。
- 触发路由器解析初始路由。

使用路由

vue

<template>
  <h1>Hello App!</h1>
  <p><strong>Current route path:</strong> {{ $route.fullPath }}</p>
  <nav>
    <RouterLink to="/">Go to Home</RouterLink>
    <RouterLink to="/about">Go to About</RouterLink>
  </nav>
  <main>
    <RouterView />
  </main>
</template>

在这个 template 中使用了两个由 Vue Router 提供的组件: RouterLink 和 RouterView。
不同于常规的 <a> 标签，我们使用组件 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。我们将会在之后的部分深入了解 RouterLink 组件。
RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在某处被导入，否则 Vue Router 就不会渲染任何东西。
上述示例还使用了 {{ $route.fullPath }} 。你可以在组件模板中使用 $route 来访问当前的路由对象。

访问路由器和当前路由

不考虑Options API

对于组合式 API，我们不能通过 this 访问组件实例，所以 Vue Router 给我们提供了一些组合式函数。演练场示例中的 AboutView.vue 组件使用了这种方法：

vue

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

const search = computed({
  get() {
    return route.query.search ?? "";
  },
  set(search) {
    router.replace({ query: { search } });
  },
});
</script>

你现在不一定要完全理解这段代码，关键是要知道可以通过 useRouter() 和 useRoute() 来访问路由器实例和当前路由。

#Vue-Router

#1. 入门

Vue-Router

1. 入门