hach vue 跳转_vue-router技巧分享

本文是关于VueRouter可以做的一些Vue开发人员很少知道的事情。它不是关于VueRouter的介绍性文章。本文假设您了解VueRouter，并且已经使用过几次或更多次并了解您的使用方法。

现在你可能永远不需要使用这里提到的东西。但是，请记住这些方法，有备无患。

查询语句/Query parameters

你以前可能已经看过这些。它们无法在所有网站上看到，但您可以在进行Google搜索时轻松查看它们。当您执行简单搜索时，您会注意到URL在网站名称后面有一些内容：

这是我在DuckDuckGo(像谷歌这样的搜索引擎)上用嘿这个词做的简单搜索。如果仔细查看该链接，可以看到字母q和其后的一些其他内容。在q之前还有一个问号。问号(？)之后的所有内容都称为查询。它用于以键值对的形式提供附加信息。

VueRouter允许我们非常容易地传递查询参数。在中是这样使用查询语句的：

这里我们的参数使用params属性传递，下一个属性是查询。它还接受一个对象，各种查询表示为键值对。

在这种情况下，URL看起来像这样：

重定向所有路径

您已在单独的routes.js文件中准备好所有路径，将它们正确地包含在VueRouter实例中并使用本地开发服务器进行检查。这一切看起来还不错。这样配置的route.js可以包括全部的页面。

你问一个朋友试一试并提供反馈。你信心满满，什么都不会出错。但突然之间，你的朋友会给你看屏幕。它上面有一个空白页面！但是你覆盖了网站的所有路径。出了什么问题？！

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

不是向用户显示空白页面，而是将它们重定向到您选择的页面可能更好。将以下路径添加到routes.js文件中：

{

path:'*',

redirect:'/'

}

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

添加哈希片段

不知道你是否访问过维基百科页面？有许多页面(几乎所有页面)都有内容索引。当您单击它们时，页面向下滚动，您可以神奇地跳转到该内容。

您的网站可能有一个主要内容进一步缩小的页面，您需要在访问该页面后立即向下滚动到该页面。可以使用锚标记并将内容的id放在href属性中来实现此行为。但是，这仅适用于同一页面，而不是在您必须访问其他页面并立即跳转到内容时。为此，您可以使用名为hash的属性。它需要内容的id，如锚标签。

但是，这只会将文本的id附加到URL。与此类似的东西 - https://something.com/user#text。它不会向下滚动到内容。这是因为我们只告诉我们的VueRouter为它的URL添加一个哈希值。我们还没有告诉它如何在页面上滚动。散列片段必须与下面显示的滚动行为相结合。

滚动行为

我们现在将设置路由的滚动行为。有了这个，我们可以使用我们附加到URL的哈希自动滚动到我们的内容，甚至让VueRouter记住滚动前的最后位置。这就像在维基百科中，您可以单击索引中的内容标题，单击后退按钮，而不是返回到上一页，页面向上滚动到索引位置。

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

import {routes} from './routers.js'

const router = new VueRouter({

routes,

scrollBehaviour(to,from, savedPosition){

// 保存返回的位置 if(savedPosition){

return savedPosition

}

// 设置前往页面的锚点 if(to.hash){

return {selector: to.hash}

}

return {x:0, y:0}

}

})

译者注：是不是有点像keep-alive的功能。

这里，路由是我们所有的路由都保存在一个单独的文件中。 scrollBehavior()函数管理我们路线的滚动。它有3个参数：to - 这代表我们将要访问的新路线

from - 这是我们之前的路线。因此，如果我们点击主页上的访问“关于”页面，那么将成为我们的“关于”页面，并且从主页开始。

savedPosition - 这是重要的参数。 它表示滚动前的前一个位置。 在我解释上述功能的作用后，它会变得清晰。

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

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

访问下一页时，它的路由中会有一个哈希值。第二个条件检查会注意到这个哈希值。它返回一个对象。选择器值指示我们要跳转到的内容的ID。

因此，当我们点击该链接时，会在URL中添加一个哈希片段，页面会自动向下滚动到我们的内容。 函数的最后一行返回一个对象，该对象具有页面顶部的x和y坐标。当我们刚访问一个页面并且没有散列片段时，这是必要的。当没有任何内容可以滚动到我们也没有手动向下滚动时，我们需要显示页面顶部。

这是本文的内容。我希望你能学到一些关于VueRouter的新知识。如果你想参考VueRouter的可靠来源，最好的地方是官方文档，因为它们编写得非常好。

如果您知道VueRouter的更多小功能，欢迎在评论区提出来~

原文： medium