Vue2向Vue3过度核心技术路由

目录

    • 1 路由介绍
      • 1.思考
      • 2.路由的介绍
      • 3.总结
    • 2 路由的基本使用
      • 1.目标
      • 2.作用
      • 3.说明
      • 4.官网
      • 5.VueRouter的使用(5+2)
      • 6.代码示例
      • 7.两个核心步骤
      • 8.总结
    • 3 组件的存放目录问题
      • 1.组件分类
      • 2.存放目录
      • 3.总结
    • 4 路由的封装抽离
    • 5 Vue路由-重定向
      • 1.问题
      • 2.解决方案
      • 3.语法
      • 4.代码演示
    • 6 Vue路由-404
      • 1.作用
      • 2.位置
      • 3.语法
      • 4.代码示例
    • 7 Vue路由-模式设置
      • 1.问题
      • 2.语法


1 路由介绍

在这里插入图片描述

1.思考

单页面应用程序,之所以开发效率高,性能好,用户体验好

最大的原因就是:页面按需更新

在这里插入图片描述

比如当点击【发现音乐】和【关注】时,只是更新下面部分内容,对于头部是不更新的

要按需更新,首先就需要明确:访问路径组件的对应关系!

访问路径 和 组件的对应关系如何确定呢? 路由

2.路由的介绍

生活中的路由:设备和ip的映射关系

在这里插入图片描述

Vue中的路由:路径和组件映射关系

在这里插入图片描述

3.总结

  • 什么是路由
  • Vue中的路由是什么

2 路由的基本使用

1.目标

认识插件 VueRouter,掌握 VueRouter 的基本使用步骤

2.作用

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

3.说明

Vue 官方的一个路由插件,是一个第三方包

4.官网

https://v3.router.vuejs.org/zh/

5.VueRouter的使用(5+2)

固定5个固定的步骤(不用死背,熟能生巧)

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

    yarn add vue-router@3.6.5
    
  2. main.js中引入VueRouter

    import VueRouter from 'vue-router'
    
  3. 安装注册

    Vue.use(VueRouter)
    
  4. 创建路由对象

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

    new Vue({
      render: h => h(App),
      router:router
    }).$mount('#app')
    
    

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

在这里插入图片描述

6.代码示例

main.js

// 路由的使用步骤 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')

7.两个核心步骤

  1. 创建需要的组件 (views目录),配置路由规则

在这里插入图片描述

  1. 配置导航,配置路由出口(路径匹配的组件显示的位置)

    App.vue

    <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>
    

8.总结

  1. 如何实现 路径改变,对应组件 切换,应该使用哪个插件?
  2. Vue-Router的使用步骤是什么(5+2)?

3 组件的存放目录问题

注意: .vue文件 本质无区别

1.组件分类

.vue文件分为2类,都是 .vue文件(本质无区别)

  • 页面组件 (配置路由规则时使用的组件)
  • 复用组件(多个组件中都使用到的组件)

在这里插入图片描述

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹

    页面组件 - 页面展示 - 配合路由用

  2. src/components文件夹

    复用组件 - 展示数据 - 常用于复用

3.总结

  • 组件分类有哪两类?分类的目的?
  • 不同分类的组件应该放在什么文件夹?作用分别是什么?

4 路由的封装抽离

问题:所有的路由配置都在main.js中合适吗?

目标:将路由模块抽离出来。 好处:拆分模块,利于维护

在这里插入图片描述

路径简写:

脚手架环境下 @指代src目录,可以用于快速引入组件

5 Vue路由-重定向

1.问题

网页打开时, url 默认是 / 路径,未匹配到组件时,会出现空白

在这里插入图片描述

2.解决方案

重定向 → 匹配 / 后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },
比如:
{ path:'/' ,redirect:'/home' }

4.代码演示

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
 	 ...
  ]
})

6 Vue路由-404

1.作用

当路径找不到匹配时,给个提示页面

2.位置

404的路由,虽然配置在任何一个位置都可以,但一般都配置在其他路由规则的最后面

3.语法

path: “*” (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

4.代码示例

NotFound.vue

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router

7 Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#,能否切成真正路径形式?

  • hash路由(默认) 例如: http://localhost:8080/#/home
  • history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持,开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/91136.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

谈谈子网划分的定义、作用、划分方式以及案例

个人主页&#xff1a;insist--个人主页​​​​​​ 本文专栏&#xff1a;网络基础——带你走进网络世界 本专栏会持续更新网络基础知识&#xff0c;希望大家多多支持&#xff0c;让我们一起探索这个神奇而广阔的网络世界。 目录 一、子网划分的定义 二、子网掩码的作用 1、…

林业气象站——林业种植气象观测

林业气象站是一种用于观测林区气象环境的仪器&#xff0c;能够观测林区天气、土壤等自然环境参数&#xff08;温度、湿度、风速、风向、降雨量、气压、放射线、土壤湿度等&#xff09;&#xff0c;为开展环境观测、天气预报、灾害预警、林区虫害防治起到综合指导作用。 林业气…

Unity中的数学基础——贝塞尔曲线

一&#xff1a;前言 一条贝塞尔曲线是由一组定义的控制点P0到 Pn&#xff0c;n1为线性&#xff0c;n2为二次......第一个和最后一个控制点称为起点和终点&#xff0c;中间的控制点一般不会位于曲线上 获取两个点之间的点就是通过线性插值&#xff08; Mathf.Lerp&#xff09…

基于Python+djangoAI 农作物病虫害预警系统智能识别系统设计与实现(源码&教程)

1.背景 随着科技的发展&#xff0c;机器学习技术在各个领域中的应用越来越广泛。在农业领域&#xff0c;机器学习技术的应用有助于提高农作物的产量和质量&#xff0c;降低农业生产的成本。本文针对农作物健康识别问题&#xff0c;提出一种基于机器学习方法的农作健康识别系统&…

FOC之SVPWM学习笔记

一、参考资料 【自制FOC驱动器】深入浅出讲解FOC算法与SVPWM技术 - 知乎FOC入门教程_zheng是在下的博客-CSDN博客DengFOC官方文档技术干货 |【自制】FOC驱动板SVPWM_扇区判断_时间计算_哔哩哔哩_bilibili 二、FOC控制算法流程框图 在FOC控制中主要用到三个PID环&#xff0c;从内…

picGo+gitee+typora设置图床

picGogiteetypora设置图床 picGogitee设置图床下载picGo软件安装picGo软件gitee操作在gitee中创建仓库在gitee中配置私人令牌 配置picGo在插件设置中搜索gitee插件并进行下载 TyporapicGo设置Typora 下载Typora进行图像设置 picGogitee设置图床 当我了解picGogitee可以设置图床…

基础论文学习(2)——DETR

目标检测 DETR&#xff1a;End-to-End Detection with Transformer detr是facebook提出的引入transformer到目标检测领域的算法&#xff0c;效果很好&#xff0c;做法也很简单&#xff0c;相较于RCNN和YOLO系列算法&#xff0c;避免了Proposal/AnchorNMS的复杂流程。 1. detr…

网络安全在医疗行业中的重要性

不可否认&#xff0c;现代世界见证了技术和医疗行业的交织&#xff0c;塑造了我们诊断、治疗和管理健康状况的新方式。随着电子健康记录取代纸质文件&#xff0c;远程医疗缩短了患者和医疗服务提供者之间的距离&#xff0c;数字化转型既是福音&#xff0c;也是挑战。最近的全球…

数据库三大范式是什么,又为什么要反范式?

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;CSDN领军人物&#xff0c;全栈领域优质创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师…

opencv/C++ 人脸检测

前言 本文使用的测试资源说明&#xff1a; opencv版本&#xff1a;opencv 4.6.0 人脸检测算法 Haar特征分类器 Haar特征分类器是一个XML文件&#xff0c;描述了人体各个部位的Haar特征值。包括&#xff1a;人脸、眼睛、鼻子、嘴等。 opencv 4.6.0自带的Haar特征分类器&…

vue3+uni——watch监听props中的数据(组件参数接收与传递defineProps、defineEmits)

案例说明 A页面引用的子组件B A页面 <template><view>//引用组件<serviceOrder change"change" :list"list" :current"type"></serviceOrder></view> </template><script setup>import serviceOrd…

SpringCloud超详细教程

1.认识微服务 随着互联网行业的发展&#xff0c;对服务的要求也越来越高&#xff0c;服务架构也从单体架构逐渐演变为现在流行的微服务架构。这些架构之间有怎样的差别呢&#xff1f; 1.0.学习目标 了解微服务架构的优缺点 1.1.单体架构 单体架构&#xff1a;将业务的所有…

vue中实现echarts三维散点图

需要安装 echarts 同时引入 echarts-gl 我安装的版本&#xff1a; "echarts": "^5.3.2", "echarts-gl": "^2.0.9", import Vue from "vue"; import * as echarts from "echarts"; Vue.prototype.$echarts echa…

Spring 学习源码的基础 核心原理与核心概念

文章目录 核心原理AnnotationConfigApplicationContextIoC 容器加载流程Spring 中如何创建一个对象Bean 的创建过程 (生命周期)单例 原型推断构造方法依赖注入AOP 动态代理判断是否需要 AOP 的大致流程CGLib 做 AOP 的大致流程事务事务代理对象执行方法的流程事务注解排至失效的…

使用yapi生成漂亮接口文档

YApi-教程 1. 进入yapi 的菜单 2. 从微服务中导出swagger的json 从浏览器页面访问http://localhost:端口/服务/swagger-ui.html&#xff0c;然后打开浏览器的控制台&#xff0c;查看network&#xff0c;刷新下页面&#xff0c;找到XHR中的api-docs&#xff0c;然后查看res…

基于Java+SpringBoot+Vue前后端分离公交线路查询系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

stm32读写片内flash项目总结(多字节读写tongxindu)

1.flash操作驱动程序 a头文件 #ifndef FLASH_H #define FLASH_H #include “stm32f4xx.h” #define BOARD_NUM_ADDR 0x0800C000 #define STM32_FLASH_BASE 0x08000000 //STM32 FLASH的起始地址 #define FLASH_WAITETIME 50000 //FLASH等待超时时间 //FLASH 扇区的起始地址…

openGauss学习笔记-51 openGauss 高级特性-列存储

文章目录 openGauss学习笔记-51 openGauss 高级特性-列存储51.1 语法格式51.2 参数说明51.3 示例 openGauss学习笔记-51 openGauss 高级特性-列存储 openGauss支持行列混合存储。行存储是指将表按行存储到硬盘分区上&#xff0c;列存储是指将表按列存储到硬盘分区上。 行、列…

el-backtop返回顶部的使用

2023.8.26今天我学习了如何使用el-backtop组件进行返回页面顶部的效果&#xff0c;效果如&#xff1a; <el-backtop class"el-backtop"style"right: 20px; bottom: 150px;"><i class"el-icon-caret-top"></i></el-backtop&…

Markdown初级使用指南

前言 大家好&#xff0c;我是艾老虎尤&#xff0c;我在一篇官方的文章中&#xff0c;我了解到了markdown&#xff0c;原本我写博客一直是使用的富文本编译器&#xff0c;之前我也有同学叫我使用MD&#xff0c;但是我嫌它复杂&#xff0c;就比如说一个标题&#xff0c;我在富文…