VueRouter 的一些鲜为人知的惊人功能

由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！

介绍

本文并非 VueRouter 的入门文章，而是介绍 VueRouter 一些鲜为人知的功能。本文假设您已了解 VueRouter，并已多次使用过它，熟悉其各项功能。

或许你永远都用不到这里提到的这些东西。但记住它们总是有用的，以备不时之需。

查询参数

如果您知道查询参数是什么，可以跳过下面的解释。

你可能以前见过这些。并非所有网站都包含这些，但在使用谷歌搜索时很容易看到。当你进行简单的搜索时，你会注意到网址中网站名称后面有一些内容https://duckduckgo.com/?q=hey&t=h&atb=v115-6。这是我在DuckDuckGo （类似谷歌的搜索引擎）上搜索“Hey”一词的示例。仔细观察这个链接，你会看到字母“q”以及它后面的一些其他内容。在“q”前面还有一个问号。问号（？）后面的所有内容都称为查询字符串。它用于以key-value词对的形式提供附加信息。

VueRouter 允许我们非常轻松地传递查询参数。为此，我们使用query<router-link>属性：

<router-link 
    :to="{ name: 'pathName', 
           params: { id: $route.params.id }, 
           query: { locale: 'en' } }"
>

</router-link>

这里，参数通过 params 属性传递，紧随其后的属性是 query。它也接受一个对象，各种查询以key-value键值对的形式表示。

在这种情况下，URL 看起来会像这样：https://something.com/user/456?locale=en

重定向所有路径

您已将所有路径整理在一个单独的routes.js文件中，并已正确将其包含在 VueRouter 实例中，且已使用本地开发服务器进行检查。一切看起来都没问题。您不可能遗漏任何路径，路径名称也完全正确。

你请朋友试用一下并给出反馈。你满心欢喜，觉得一切都万无一失。但突然，朋友给你看屏幕时，上面竟然是一片空白！可是你明明已经把网站的所有路径都覆盖好了。到底哪里出了问题？！

您肯定已经涵盖了网站所需的所有路径。但这并不能阻止您的朋友或其他用户在 URL 中输入任何他们想要的内容。由于 VueRouter 显然无法识别这些路径，因此会显示空白页面。如果用户是第一次访问您的网站，并且不小心输入了错误的路径，也可能出现这种情况。

我知道我费了好大劲才弄明白为什么Gmail没开机https://google.gmail.com，而是开着https://mail.google.com。真是太奇怪了😜。

与其向用户显示空白页面，不如将他们重定向到您选择的页面。请将以下路径添加到您的routes.js文件中：

{
    path: '*',
    redirect: '/'
}

这样做会将所有未在文件中处理的路由重定向到首页。因此，下次有人输入错误的路由时，他们将被重定向回首页。

添加哈希片段

你访问过维基百科页面吗？我猜你肯定访问过。很多页面（几乎所有页面）都有目录索引。点击索引后，页面会向下滚动，然后你就神奇地跳转到了相应的内容。

您的网站可能存在一个页面，其主要内容位于页面底部，您需要在访问该页面后立即向下滚动才能找到主要内容。这种行为可以通过使用锚点标签并在href<a>属性中设置内容的 ID来实现。但是，这种方法仅适用于同一页面，而无法在访问其他页面后立即跳转到主要内容。为此，您可以使用名为hash的属性。它与锚点标签一样，需要指定内容的 ID。<router-link>

<router-link :to="{ name: pathName, hash: '#text' }">
    Jump to content
</router-link>

然而，这只会将文本的 ID 添加到 URL 中，类似于这样：`<text>` https://something.com/user#text。它不会向下滚动到内容。这是因为我们只告诉 VueRouter 在 URL 中添加一个哈希值，而没有告诉它如何在页面上滚动。哈希值片段必须与下面所示的滚动行为结合使用。

滚动行为

现在我们将设置路由的滚动行为。这样，我们就可以利用附加到 URL 的哈希值实现内容的自动滚动，甚至可以让 VueRouter 记住滚动前的最后位置。这就像在维基百科上一样，当你点击首页的内容标题，然后点击后退按钮时，页面不会返回上一页，而是会滚动到首页的位置。

将以下函数添加到 VueRouter 实例中：

import { routes } from './routes.js'
const router = new VueRouter({
    routes,
    scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
            return savedPosition;
        }
        if (to.hash) {
            return { selector: to.hash };
        }
        return { x: 0, y: 0 };
    }
});

这里，routes 指的是我们保存在单独文件中的所有路由。该scrollBehavior()函数负责管理路由的滚动。它有 3 个参数：

1. 至- 这代表我们将要访问的新路线
2. from - 这是我们之前的路径。所以，如果我们点击<router-link>首页上的某个链接访问“关于我们”页面，那么to就是“关于我们”页面，而from就是首页。
3. savedPosition——这是一个重要的参数。它表示滚动之前的页面位置。在我解释上述函数的作用之后，这一点就显而易见了。

当我们向下滚动页面时，按下后退按钮会返回页面顶部。这是因为我们在滚动之前的“先前位置”是页面顶部。scrollBehavior()函数中的第一个条件检查就是检查savedPosition参数中保存的位置。

第二个条件检查是针对哈希片段的。您可能还记得，我们在上一节中给 URL 添加了一个哈希值。但是，这个哈希值目前并不应用于当前页面，而是在我们点击链接时才会应用。

当访问下一页时，其路由中会包含一个哈希值。第二个条件检查会检测到这个哈希值，并返回一个对象。该对象中的选择器值指示了我们要跳转到的内容的 ID。

因此，当我们点击该链接时，URL 中会添加一个哈希片段，页面会自动向下滚动到我们的内容。

函数的最后一行返回一个包含页面顶部 x 和 y 坐标的对象。这对于刚访问过一个页面且没有哈希片段的情况是必要的。当页面没有可滚动的内容，且我们也没有手动向下滚动时，我们需要显示页面顶部。

本文到此结束。希望您从本文中学到了一些关于 VueRouter 的新知识。如果您想参考 VueRouter 的可靠资料，最好的选择是官方文档，因为它们写得非常好。

如果您知道 VueRouter 还有一些不为人知的功能，欢迎在下面的评论中提及。