小白学习vuejs-09-路由续章

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

自学前端

• 前文

  • 本文是我自学vue的一些知识以及个人理解, 希望帮助到一些想要学习前端的小白朋友
  • 介绍本次学习的是路由相关知识
  • 这是基于我学习的笔记而来的文章
  • 学习了路由之后我们可以进行页面的跳转, 之前的父子组件间传递数据也可以用上了
  • route: 单数单个路由
  • routes: 复数, 多个路由, 路由的集合
  • router: 翻译为路由器, 意思是路由的管理者

URL的hash

- URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
- 我们可以通过直接复制location.hash来改变href, 但是页面不发生刷新
- location.hash = ''

#### HTML5的history模式: pushState

> history.pushState({}, '', '/foo')

#### HTML5的history模式: replaceState

> history.replaceState({}, '', '/foo')

- history.go()
- history.back() = history.go(-1)
- history.forward() = history.go(1)

认识vue-router

• 目前前端流行的三大框架, 都有自己的路由实现
  • Angular的ngRouter
  • React的ReactRouter
  • Vue的vue-router
• 当然我们的重点是vue-router
  • vue-router是Vue.js官方的路由插件, 它和vue.js是深度集成的, 适合用于构建单页面应用
  • 我们可以访问其官方网站对其进行学习: router.vuejs.org/zh/

安装和使用vue-router

• 因为我们已经学习了webpack, 后续开发中我们主要通过工程化的方式进行开发的
  • 所以在后续, 我们直接使用npm来安装路由即可

    npm install vue-router --save

  • 步骤二: 在模块化工程中使用它(因为一个插件, 所以可以通过Vue.use()来安装路由功能)
    • 第二步: 堕入路由对象, 并调用Vue.use(VueRouter)
    • 第二步: 创建路由实例, 并且传入路由映射配置
    • 第三步: 在Vue实例中挂载创建的路由实例
• 使用vue-router的步骤:
  • 第一步: 创建路由组件
  • 第二步: 配置路由映射: 组件和路径映射关系
  • 第三步: 使用路由: 通过和

使用路由

• :该标签是一个vue-router中已经内置的组件,它会被渲染成一个标签
• :该标签会根据当前的路径, 动态渲染出不同的组件
• 网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等和处于同一个等级
• 在路由切换时, 切换的是挂载的组件, 其他内容不会发生改变.