vue路由系统基本使用指南

目录

路由是什么

路由的使用场景

vue路由基本步骤分为七步

案例

结语

---

• 路由是什么

  • 路由是一种映射关系

  • 路径和组件的映射关系

  • 接口和服务的映射关系

  • 路由器和设备IP的映射关系

  • vue路由其实就是路径和组件的映射关系  

• 路由的使用场景

  • 我们为何学习和使用路由
    • 单页面应用(SPA):所有的功能都在一个HTML页面上实现
    • 前端路由的作用就是实现业务场景切换
  • 优点
    • 整体不刷新页面,达到无刷新获取页面内容,用户体验较好
    • 数据传递容易,开发效率较高
  • 缺点
    • 开发的成本高(需要学习专门的知识)
    • 首次加载数据较慢.不利于SEO优化
    • 因为所有功能都在一个HTML页面,不利于各种搜索引擎查找

• 开发工具包(vue-router)

  • Vue Router是Vue.js官方的路由管理器.它与Vue.js核心深度集中,让构建页面应用变得易如反掌.包含的功能有
    • 嵌套的路由/视图表
    • 模板化的,基于组件的路由配置
    • 路由参数,查询,通配符
    • 基于Vue.js过渡系统的视图过渡效果
    • 细粒度的导航控制
    • 带有自动激活的Css Class的链接
    • HTML5历史模式或hash模式,在IE9中自动降级
    • 自定义的滚动事件

  • Vue路由组建的分类

    • 后缀为.vue的文件本质上没有任何区别,为了方便理解和记忆,总结下来的一个经验,我们通常将.vue的文件分为两类,一个是页面组件,一个是复用组件
    • 页面组件 - 通常页面展示 - 配合路由一起使用
    • 复用组件 - 通常为了展示数据 - 常用于复用(只需要更改请求数据就可以反复使用该组件)

      • vue路由 vue router 的使用 

        • 当你看到这一部分的时候,我希望你们对于vue脚手架和组件的使用,是有所学习和理解的,而不是以一个小白的身份对待这个路由的知识点,因为路由的使用,牵扯到很多组件的调用和使用,而这些在案例中也是常常出现的,本人尽量详细的解释什么时候创建的组件,而不是在主页面Appvue反复使用这个.而如果你想对路由有一个单方面的了解,希望你可以参考一下官方的vue router 文档.
        • 下面的案例基于vue脚手架