vue重修之路由【上】

文章目录

单页应用程序: SPA - Single Page Application

  • 单页面应用(SPA): 所有功能在 一个html页面 上

  • 单页应用程序(SPA)是一种Web应用程序,它通过动态加载所有相关的HTML、CSS和JavaScript资源来实现单个Web页面的呈现和交互。

  • 相比于传统的多页应用程序,SPA的优点在于可以提供更快的用户体验、更快的页面加载速度和更快的响应时间。

  • SPA通常使用JavaScript框架(如Angular、React或Vue.js)来实现动态呈现和交互,并使用AJAX技术来与Web服务器进行通信。

  • SPA的缺点在于对浏览器的性能和内存使用有更高的要求,以及对搜索引擎优化(SEO)的支持不如传统的多页应用程序。

  • 单页面应用程序之所以开发效率高、性能好、用户体验好,最大的原因在于它的按需更新机制

  • 在单页面应用程序中,所有的页面都在同一个HTML页面中呈现,页面的更新是通过动态加载组件来实现的。这就需要明确访问路径和组件的对应关系,而路由就是实现这个对应关系的重要机制。

  • 路由可以将不同的URL地址映射到不同的组件,使得用户可以通过URL地址访问到相应的组件。这样可以实现页面的按需加载,减少了页面切换的延迟和带宽开销,提高了用户体验和性能。

  • 同时,路由也可以实现浏览器的前进和后退功能,使得用户可以方便地回到之前访问的页面。

  • 在单页面应用程序中,路由通常由前端框架或库提供,如Vue.js的Vue Router和React的React Router。通过使用路由,开发者可以更加方便地管理应用程序的访问路径和组件对应关系,从而提高开发效率和代码质量。因此,路由是单页面应用程序的重要组成部分,也是实现其高效、高性能、良好用户体验的关键机制之一。

路由简介

  • Vue中路由可以理解为:路径 和 组件的映射关系

  • 在Vue中,使用Vue Router来管理路由,Vue Router会根据路由配置将不同的URL地址映射到对应的组件上,从而实现页面的按需加载。

  • Vue Router的路由配置包括路由路径和组件,路由路径指定了访问该路由对应的URL地址,组件则指定了该路由对应的组件。当用户访问该路由的URL地址时,Vue Router会动态加载该路由对应的组件并在页面中呈现,从而实现页面的按需加载和组件化开发。

  • 例如,假设我们在Vue中需要实现一个路由,访问地址为"/home",对应的组件为Home组件。可以在Vue Router中配置如下路由:

    js 复制代码
    const routes = [
      {
        path: '/home',
        component: Home
      }
    ]
    • **path指定了访问该路由对应的URL地址为"/home",component指定了该路由对应的组件为Home组件。**当用户访问"/home"的URL地址时,Vue Router就会自动加载Home组件并在页面中呈现。

因此,我们可以将Vue中的路由理解为路径和组件的映射关系,路由的作用是将不同的URL地址映射到不同的组件上,从而实现页面的按需加载和组件化开发。

Vue Reouter简介

说明:Vue 官方的一个路由插件,是一个第三方包,通过组件化的方式定义应用的路由.Vue Router通过监听浏览器的URL变化来动态匹配路由规则,并将路由对应到相应的组件上,从而实现页面的无刷新跳转和局部刷新。

作用:修改地址栏路径时,切换显示匹配的组件

  • Vue Router还支持路由的嵌套、路由参数传递、路由导航守卫等功能,可以满足多种复杂的路由需求。

VueRouter的使用(5+2)

  1. 下载 VueRouter 模块到当前工程,版本3.6.5

    bash 复制代码
    yarn add vue-router@3.6.5
  2. main.js中引入VueRouter

    js 复制代码
    import VueRouter from 'vue-router'
  3. 安装注册

    js 复制代码
    Vue.use(VueRouter)
  4. 创建路由对象

    js 复制代码
    const router = new VueRouter()
  5. 注入,将路由对象注入到new Vue实例中,建立关联

    js 复制代码
    new Vue({
      render: h => h(App),
      router:router
    }).$mount('#app')
  • main.js
javascript 复制代码
// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中,建立关联


import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter()

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
  • 两个核心步骤
  1. 创建需要的组件 (views目录),配置路由规则
  1. 配置导航,配置路由出口(路径匹配的组件显示的位置)

    • App.vue
    html 复制代码
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/friend">朋友</a>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>

组件的存放目录问题

  • .vue文件 本质无区别

组件分类

  • .vue文件分为2类,都是 .vue文件(本质无区别)
    • 页面组件 (配置路由规则时使用的组件)
    • 复用组件(多个组件中都使用到的组件)

存放目录

  • 分类开来的目的就是为了 更易维护
  1. 页面组件 - 页面展示 - 配合路由用 页面组件 配合路由用放在src/views文件夹
  2. 复用组件 - 展示数据 - 常用于复用 复用组件放在src/components文件夹

路由的封装抽离

  • 所有的路由配置都在main.js中不易管理和使用
  • 将路由模块抽离出来。 好处:拆分模块,利于维护
  • 路径简写:脚手架环境下 @指代src目录,可以用于快速引入组件
相关推荐
码蜂窝编程官方3 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
gqkmiss3 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃8 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰12 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye19 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm21 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子