小白学习vuejs-10-路由续章2

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

自学前端

• 前文

  • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
  • 介绍本次学习的是路由相关知识
  • 这是基于我学习的笔记而来的文章

路由的默认路径

• 我们这里还有一个不太好的实现:
  • 默认情况下, 进入网站的首页, 我们希望渲染首页的内容
  • 但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以
• 如何可以让路径默认跳到首页, 并且渲染首页组件呢?
  • 非常简单, 我们只需要多配置一个映射就可以了

    • const routes = [

      ​ path: '/',

      ​ redirect: '/home'

      ]

• 配置解析:
  • 我们在routers中又配置了一个映射:
  • path配置的是根路径: /
  • redirect是重定向, 也就是我们将根路径重定向到/home路径下, 这样就可以得到我们想要的结果了.

router-link补充

• 在前面的中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
• 还有一些其他属性:
  • tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
  • 元素, 而不是
  • replace: replace不会留下history记录, 所以指定replace的情况下,后退键返回不能返回到上一个页面中
  • active-class: 当对应的路由匹成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称
    • 在进行高亮显示的导航菜单或者底部tabbar是, 会使用到该类,
    • 但是通常不会修改类的属性, 会直接使用默认的router-link-active即可