本文是关于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