路由、组件目录存放

文章目录

      • 单页应用程序:SPA- Single Page Application
      • 路由的介绍
      • VuePouter的介绍
        • VueRouted 的使用
      • 组件目录存放问题(组件分类)

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

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

  • 优点:按需更新性能高,开发效率高用户体验好
  • 缺点:学习成本,首屏加载慢,不利于SEO
  • 应用场景:系统类网站/内部网站/文档类网站/移动端站点

在这里插入图片描述

路由的介绍

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

VuePouter的介绍

目标:认识插件 VuePouter ,掌握 VuePouter 的基本使用步骤
作用:修改地址栏路径时,切换显示匹配的组件
说明:Vue官方的一个路由插件,是一个第三方包
官网:https://v3.router.vuejs.org/zh/

VueRouted 的使用

5个基础步骤(固定)
①下载:下载VuePouter模块到当前工程

  • yarn add vue-roter@3.6.5
    ②引入
  • import VuePouter from ‘vue-router’
    ③安装注册
  • Vue.use(VuePouter)
    ④创建路由对象
  • const router = new VuePouter()
    ⑤注入,将路由对象注入到new Vue实例中,建立关联
    在这里插入图片描述
main.js
import Vue from 'vue'
import App from './App.vue'// 5个基础步骤(固定)
// ①下载:下载VuePouter模块到当前工程
//  yarn add vue-roter@3.6.5
// ②引入
//  import VuePouter from 'vue-router'
// ③安装注册
//  Vue.use(VuePouter)
// ④创建路由对象
//  const router = new VuePouter()
// ⑤注入,将路由对象注入到new Vue实例中,建立关联
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter()Vue.config.productionTip = falsenew Vue({render: h => h(App),router:router
}).$mount('#app')

两个核心步骤
①创建需要的组件(views目录),配置路由器规则

  • Find.vue My.vue friend.vue
    在这里插入图片描述

②配置导航,配置路由出口(路由匹配的组件显示的位置)
在这里插入图片描述

App.vue
<template><div><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></div>
</template><script>
export default {};
</script>
My.vue
<template><div><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p><p>我的音乐</p></div>
</template><script>
export default {name:'MyMusic'
}
</script><style></style>
Find.vue
<template><div><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p></div>
</template><script>
export default {name:'FindMusic'
}
</script><style></style>
Friend.vue
<template><div><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p><p>发现音乐</p></div>
</template><script>
export default {name:'FindMusic'
}
</script><style></style>
import Vue from 'vue'
import App from './App.vue'// 5个基础步骤(固定)
// ①下载:下载VuePouter模块到当前工程
//  yarn add vue-roter@3.6.5
// ②引入
//  import VuePouter from 'vue-router'
// ③安装注册
//  Vue.use(VuePouter)
// ④创建路由对象
//  const router = new VuePouter()
// ⑤注入,将路由对象注入到new Vue实例中,建立关联//2个核心步骤
//①创建需要的组件(views目录),配置路由器规则
//②配置导航,配置路由出口(路由匹配的组件显示的位置)
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化
const router = new VueRouter({//routes 路由规则们routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]})Vue.config.productionTip = falsenew Vue({render: h => h(App),router:router
}).$mount('#app')

组件目录存放问题(组件分类)

组件目录存放问题
注意.vue文件本质无区别
路由相关的组件,为什么放在views目录
在这里插入图片描述
在这里插入图片描述
组件分类

.vue文件分成两类,一种是页面组件,一种是复用组件

这一整个就是页面组件在这里插入图片描述

这些是复用组件在这里插入图片描述
分类开来更易维护

  • src/views文件夹 → 页面组件-页面展示-路由配合使用
  • src/components文件夹 → 复用组件-展示数据-常用于复用
    在这里插入图片描述
    在这里插入图片描述
    总结
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

粒子群算法求解港口泊位调度问题(MATLAB代码)

粒子群算法&#xff08;Particle Swarm Optimization&#xff0c;PSO&#xff09;是一种基于群体智能的优化算法&#xff0c;它通过模拟鸟群或鱼群的行为来寻找最优解。在泊位调度问题中&#xff0c;目标是最小化所有船只在港时间的总和&#xff0c;而PSO算法可以帮助我们找到一…

GitLab 中国发行版如何设置镜像拉取策略?

最近在用极狐GitLab&#xff08;极狐GitLab 可以理解为 GitLab 在中国的发行版&#xff09; CI/CD 的时候遇到一个问题&#xff1a;CI/CD 中有一个 stage 需要拉取 dockerhub 上的镜像&#xff0c;但是由于 dockerhub 在国内的访问不是很顺畅&#xff0c;经常发生 timeout 的情…

Spring Boot + security + jwt 测试安全策略

一、测试概述 主要目的是测试security的用法。因测试搭建mysql和redis比较麻烦&#xff0c;所以我这里将自定义的jwt和用户信息缓存到程序的内存中。 本人测试的项目比较混乱&#xff0c;Spring Boot父类只标出有用的依赖。其子类用的版本为jdk11。后续会继续深入oauth2&#x…

【Linux 基础】常用基础指令(上)

文章目录 一、 创建新用户并设置密码二、ls指令ls指令基本概念ls指令的简写操作 三、pwd指令四、cd指令五、touch指令六、rm指令七、mkdir指令八、rmdir 指令 一、 创建新用户并设置密码 ls /home —— 查看存在多少用户 whoami —— 查看当前用户名 adduser 用户名 —— 创建新…

公司宣传电子画册的制作方法

​制作公司宣传电子画册是一种非常有效的方式&#xff0c;可以展示公司的形象和产品&#xff0c;同时也可以吸引更多的潜在客户。不仅低碳环保&#xff0c;还省了不少人力和财力&#xff0c;只要一个二维码、一个链接就能随时随地访问公司的宣传画册。以下是一些制作电子画册的…

(2024,双流编码器,文本引导的风格迁移,调制,FFT 和低频滤波)FreeStyle:使用扩散模型进行文本引导风格迁移

FreeStyle: Free Lunch for Text-guided Style Transfer using Diffusion Models 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 0. 摘要 3. 方法 3.1 LDM 3.2 FreeStyle 的模型结构…

springBoot配置文件加密

很多项目的配置文件里&#xff0c;包括数据库密码、缓存密码、还有一些第三方服务的Key都是直接配在里面&#xff0c;没有做任何加密处理&#xff01; 本次我用SpringBoot 集成 Jasypt 对数据库加密以及踩坑经验 1.集成依赖&#xff0c;我用的是目前最新的版本3.0.4版本 <…

常用芯片学习——AMS1117芯片

AMS1117 1A 低压差线性稳压器 使用说明 AMS1117 是一款低压差线性稳压电路&#xff0c;该电路输出电流能力为1A。该系列电路包含固定输出电压版本和可调输出电压版本&#xff0c;其输出电压精度为士1.5%。为了保证芯片和电源系统的稳定性&#xff0c;XBLWAMS1117 内置热保护和…

语音生成、写作增强、论文辅助、英文学习,AI原生应用精彩推荐一箩筐!

崭新的2024年已然降临&#xff0c;飞桨星河社区再次涌现出诸多精彩纷呈的AI原生应用&#xff0c;快来一同探索&#xff0c;发现这些应用带来的无限惊喜与可能吧&#xff01; 语音生成&#xff1a;10音色自由选择 应用介绍 本应用基于ERNIE SDK和语音合成工具&#xff0c;可以…

树--二叉树(C语言纯手凹)

目录 目录 1.什么是树&#xff1f;&#xff08;不深入&#xff0c;仅做了解&#xff09; 2.树的表示方式 2.1孩子兄弟表示法&#xff08;左孩子右兄弟&#xff09; 2.2孩子表示法 2.3双亲表示法 3.什么是二叉树 4.二叉树分类 4.1满二叉树 4.2完全二叉树 4.3二叉搜索树…

获取鼠标点击图片时候的坐标,以及利用html 中的useMap 和area 实现图片固定位置的点击事件

一 编写原因 应项目要求&#xff0c;需要对图片的固定几个位置分别做一个点击事件&#xff0c;响应不同的操作&#xff0c;如下图&#xff0c;需要点击红色区域&#xff0c;弹出不同的提示框&#xff1a; 二 获取点击图片时候的坐标 1. 说明 实现这以上功能的前提是需要确定需…

for循坏

签名&#xff1a;但行好事&#xff0c;莫问前程。 文章目录 前言一、循坏的四要素二、for循环的格式三、for循坏的小练习1、打印1-100以内的偶数&#xff0c;并求和2、输出所有的水仙花数3、求两个数的最大公约数和最小公倍数3.1最大公约数3.2最小公倍数 4、双层for循坏打印九九…

linux安装python3.11

yum install gcc-c zlib-devel bzip2-devel openssl* ncurses-devel sqlite* readline-devel tk-devel gdbm-devel libpcap* xz-devel libffi-devel -y 下载地址 https://www.python.org/ftp/python/3.11.7/Python-3.11.7.tar.xz 上传python文件&#xff0c;解压&#xff…

kubernetes-快速部署一套k8s集群

1、前置知识点 1.1 生产环境可部署Kubernetes集群的两种方式 目前生产部署Kubernetes集群主要有两种方式&#xff1a; kubeadm Kubeadm是一个K8s部署工具&#xff0c;提供kubeadm init和kubeadm join&#xff0c;用于快速部署Kubernetes集群。 二进制包 从github下载发行…

进程的执行过程

文章目录 前言一、进程的执行过程二、进程的示例2.1 示例1所有进程必须有限或者与时钟相关2.2 示例2多进程共享变量2.3 示例3仿真在0时刻结束2.4 示例4仿真变量保持不变 总结 前言 本文主要记录一下进程的执行过程&#xff0c;并通过一些例子&#xff0c;帮助进一步理解这个过…

活字格V9获取图片失败bug,报错404,了解存储路径,已改为批量上传和批量获取

项目场景&#xff1a; 问题描述 原因分析&#xff1a; 解决方案&#xff1a; 完成了批量上传功能&#xff0c;这插件真的很方便 于是写了个批量获取附件的js代码&#xff0c;我真厉害 项目场景&#xff1a; 活字格V9版本获取图片链接Upload 【9.0.103.0】图片上传的存储路…

境外投资企业备案结果公开名录列表数据

境外投资企业备案结果公开名录列表数据 1、时间&#xff1a;更新至2023年10月16日 2、指标&#xff1a;境外投资企业_机构、境内投资者名称、投资国别地区 3、来源&#xff1a;商务部 4、指标解释 境外投资企业&#xff08;机构&#xff09;备案结果公开名录列表&#xff…

USB-C显示器:未来显示技术的革新者

随着科技的不断发展&#xff0c;显示技术也在不断进步&#xff0c;而USB-C显示器作为最新的显示技术&#xff0c;正在引领着显示行业的发展潮流。USB-C显示器具有许多优点&#xff0c;如高速传输、便捷连接、节能环保等&#xff0c;使其成为未来显示技术的革新者。 一、USB-C显…

[PHP]严格类型

PHP: 类型声明 - Manual

部署YUM仓库服务

一、yum仓库 1. yum简介 yum是一个基于RPM包&#xff08;是Red-Hat Package Manager红帽软件包管理器的缩写&#xff09;构建的软件更新机制&#xff0c;能够自动解决软件包之间的依赖关系。 为什么会有依赖关系的发生 因为linux本身就是以系统简洁为自身优势&#xff0c;所以…