【转】这些Vue router你都知道?

Vue路由器是Vue的官方路由器,主要用于在应用程序中创建位于不同路径(/home, /profile)上的多个页面,但有一些功能是有些人不知道的。在本教程中,我们将学习Vue路由器的一些惊人特性,以及如何在我们的应用程序中使用它们。
来源: https://www.smashingmagazine.com/2020/08/vue-router-features/ 作者:Timi 浏览:152 发布时间:2020-09-02 08:26:51 标签: 译文

Vue路由器是Vue的官方路由器。它与Vue core深度集成,使使用Vue构建单页面应用程序轻而易举。它的一些流行功能包括:

 动态路由匹配。

指定的路线。

  • 命名视图
  • 程序化的导航



在使用Vue进行开发时,这些特性被大量使用,这是因为它们是您需要了解的基础知识的一部分,以便有效地使用路由器。但是Vue路由器有一些非常有用的特性,这些特性对开发非常有帮助,在本文中,我们将看看它们。


出于本教程的目的,我们将构建一个简单的应用程序,它将有助于理解本文所涵盖的一些概念。您可以在GitHub上找到本文中使用的所有代码。如果你有兴趣做更多的路由器,你将受益于本教程。


注意:本文需要对Vuejs和Vue路由器有基本的了解。


滚动的行为

这是在从一个页面导航到另一个页面时观察到的行为。Vue路由器的默认行为只有在滚动到页面顶部以外的位置时才会被注意到。这是因为,在默认情况下,从页面导航离开时的滚动位置是在新页面上维护的。这意味着,如果你点击一个链接,导致一个新的路线(即从/ home /)的位置假设接近当前页面的页脚,新页面将开始从相同的位置,而不是从页面的顶部。


我使用Vue CLI命令Vue create Vue - Router -demo创建了一个Vue应用程序,在设置应用程序时,我还选择了Vue Router作为选项的一部分,因为我们将在整个教程中使用它。


我们还需要对JSONPlaceholder进行API调用,以说明使用Vue路由器的一些概念。为此,我们将使用Axios。安装Axios:


# using YARN
yarn add axios
# or NPM
npm install axios



在这里,我们导入axios并使用它从getPost方法中的JSONPlaceholder中获取一个帖子列表。我们还将从这个API调用获得的post数组赋值给来自这个页面的data函数的post,这是因为我们希望在模板部分使用该数据。在此之后,我们循环遍历列表中的posts数组(<ul></ul>),并使用每个post的id作为链接参数为每个post附加一个链接(这称为动态路由匹配)。我们还添加了一个段落,作为加载指示器。




留言咨询