【Vue】六:路由(上)使用路由 多级路由

news2024/12/23 19:00:49

文章目录

  • 1.多页面应用
  • 2. 单页面应用(使用路由)
  • 3. 多级路由

1.多页面应用

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2. 单页面应用(使用路由)

(1)安装vue-router插件

  • vue2 要安装 vue-router3
    npm i vue-router@3
  • vu3 要安装 vue-router4
    npm i vue-router@4

(2)main.js 中引入并使用 vue-router
new Vue 时添加新的配置项:一旦使用了 vue-router 插件,在 new Vue 的时候可以添加一个全新的配置项:router
在这里插入图片描述

(4)router 路由器的创建一般放在一个独立的 js 文件中,例如:router/index.js
在这里插入图片描述
(5)编写router
【index.js】
在这里插入图片描述
(6)使用 router-link 标签代替 a 标签(App.vue 中)
【App.vue】
在这里插入图片描述

<router-view></router-view>为一个占位符,指定组件最终展示的位置。

(7)测试
在这里插入图片描述

3. 多级路由

子组件:【shijiazhuang.vue】

在这里插入图片描述

父组件:【hebei.vue】

在这里插入图片描述
路由【index.js】

在这里插入图片描述

在这里插入图片描述
注意:一般普通组件存放在components中,路由组件存放在pages中。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

字节薪酬体系被曝光,我真的酸了....

曾经的互联网是PC的时代&#xff0c;随着智能手机的普及&#xff0c;移动互联网开始飞速崛起。而字节跳动抓住了这波机遇&#xff0c;2015年&#xff0c;字节跳动全面加码短视频&#xff0c;从那以后&#xff0c;抖音成为了字节跳动用户、收入和估值的最大增长引擎。 自从字节…

【Java】数组详解

文章目录 一、数组的基本认识1.1 数组的概念1.2数组的创建与初始化1.3 数组的使用 二、数组的类型 — 引用类型2.1 JVM 内存分布2.2 什么是引用类型2.3 基本类型变量与引用类型变量的区别2.4 Java 中的 null 三、数组的应用3.1 保存数据3.2 函数参数3.3 函数返回值 一、数组的基…

STL——string和vector容器

初识STL **STL的基本概念****vector容器存放内置数据类型****在vector容器中存放自定义数据类型****vector容器嵌套vector容器****string容器——构造函数****string容器——赋值操作****string容器——字符串拼接****string容器——字符串的查找和替换****string容器——字符串…

Java阶段四Day01

Java阶段四Day01 文章目录 Java阶段四Day01Security框架通配符Vue脚手架 Vue-cli关于VUE关于VUE Cli创建Vue Cli工程解决端口被占用 Vue工程的工程结构[.idea]【重要】[node_modules]【重要】[public]favicon.icoindex.html [src][assets][compnents]【重要】[router][store]【…

Kafka详解(一)

第1章 Kafka概述 1.1 定义 1.2 消息队列 目前企业中比较常见的消息队列产品主要有Kafka、ActiveMQ、RabbitMQ、RocketMQ等。Message Queue ② 在大数据场景主要采用Kafka作为消息队列 ② 在JavaEE开发中主要采用ActiveMQ、RabbitMQ、RocketMQ Kafka存储数据&#xff0c;且保证…

虚函数+多态实现原理(一个冷门知识)

目录 多态实现 虚函数定义 先说原理 抛出问题 探究多态底层 冷门知识 多形态的大海 多态实现 完成类多态体现&#xff0c;多态两个条件: 虚函数重写 父类指针或者引用去调用虚函数。 虚函数定义 虚函数重写/覆盖条件 : 函数 三同 (函数名、参数、返回值) 不符合重写&…

【板栗糖GIS】——如何使用插件将微信读书笔记同步到notion

【板栗糖GIS】——如何使用插件将微信读书笔记同步到notion 注&#xff1a;本文创意以及插件开发皆是B站的【三此君】 视频链接如下&#xff1a; 全网唯一支持图文导出的微信读书插件&#xff0c;升级啦&#xff01;主打一个惊艳。_哔哩哔哩_bilibili &#xff0c;我只是记录…

阿里内部人手一份的Spring Cloud Alibaba手册

“微服务架构经验你有吗&#xff1f;” 前段时间一个朋友去面试&#xff0c;阿里面试官一句话问倒了他。实际上&#xff0c;不在 BAT 这样的大厂工作&#xff0c;是很难接触到支撑千亿级流量微服务架构项目的。但也正是这种难得&#xff0c;让各个大厂都抢着要这样的人才&…

linux(信号结尾)

目录&#xff1a; 1.可重入函数 2.volatile关键字 3.SIGCHLD信号 -------------------------------------------------------------------------------------------------------------------------------- 1.可重入函数----------用来描述一个函数的特点的 1.在单进程当中也存…

【数据结构】图的遍历、图的应用

以下是对王道数据结构图的部分选择题的纠错 图的遍历 对于一个非连通无向图G&#xff0c;采用DFS访问所有顶点&#xff0c;在DFSTraverse函数中调用DFS的次数正好等于连通分量个数 一次遍历必然会将一个连通图中的所有顶点都访问到&#xff0c;对于已被访问的顶点不在调用DFS&…

APP测试中ios和Android的区别是什么~

01、常识性区别 02、导航方式 iOS&#xff1a;Tab放在页面底部&#xff0c;不能通过滑动来切换&#xff0c;只能点击。也有放在上面的&#xff0c;也不能滑动&#xff0c;但有些Tab本身可以滑动&#xff0c;比如天猫的。还有新闻类的应用。 Android&#xff1a;一般放在页面…

数据库实验五 函数

任务描述 本关任务&#xff1a;对表达式取整 相关知识 四舍五入的函数 ROUND(X,D) 返回X&#xff0c;其值保留到小数点后D位&#xff0c;而第D位的保留方式为四舍五入。 若D的值为0,则对小数部分四舍五入。 若将D设为负值&#xff0c;保留X值小数点左边的D位 TRUNCATE(X,D)…

《剑指 Offer--LeetCode 学习计划》-- 字符串

剑指 Offer 05. 替换空格&#xff08;Easy&#xff09; 题目描述 请实现一个函数&#xff0c;把字符串 s 中的每个空格替换成"%20"。限制&#xff1a;0 < s 的长度 < 10000。 举例说明 示例 1&#xff1a; 输入&#xff1a;s “We are happy.”。输出&…

K210图像检测(1~8)数字卡片识别

前言 第一次使用该平台。想先找一个简单的识别&#xff0c;来走走流程。就想到了&#xff0c;前几年的送药小车的数字卡片识别。花了半天收集标记图片。在运行时要注意摄像头与数字卡片的高度。不过也有些不足&#xff0c;可能是收集某个数字的训练集的时候&#xff0c;拍摄高度…

文件智能归类,让文件分类变得简单易行

在数字化信息时代&#xff0c;我们经常需要处理各种类型的文件&#xff0c;如文档、图片、视频等&#xff0c;而这些文件可能存在于不同的文件夹、不同的磁盘之间&#xff0c;管理起来十分繁琐。为了解决这个问题&#xff0c;文件智能归类管理应运而生。这种文件管理方式采用智…

公司新招了几个00后,我愿称之为卷王之王

前几天我们公司一下子也来了几个新人&#xff0c;这些年轻人是真能熬啊&#xff0c;本来我们几个老油子都是每天稍微加会班就打算走了&#xff0c;这几个新人一直不走&#xff0c;搞得我们也不好走。 2023年秋招就要开始了&#xff0c;最近内卷严重&#xff0c;各种跳槽裁员&a…

水中声源级SL的求解应用举例

水中声源级SL的求解应用举例 在水声学中&#xff0c;经常会遇到声源级的概念&#xff0c;并根据声源级的大小估计其他重要参数&#xff0c;本文举例说明声源级的概念和定义。 一、声源级的定义 声源级用来描述声音辐射源所产生声信号或噪声在1m距离处的声强量级。其定义为 S …

安卓大作业 书籍列表APP

系列文章 安卓大作业 书籍列表APP 文章目录 系列文章1&#xff0e;背景2&#xff0e;功能3. 源代码获取 1&#xff0e;背景 我做的项目是一个可以查看到书籍列表以及详情效果的内容&#xff0c;主要使用到的技术有Intent数据传递以及数据库存储的应用&#xff0c;其次使用的组…

【笔试强训选择题】Day23.习题(错题)解析

作者简介&#xff1a;大家好&#xff0c;我是未央&#xff1b; 博客首页&#xff1a;未央.303 系列专栏&#xff1a;笔试强训选择题 每日一句&#xff1a;人的一生&#xff0c;可以有所作为的时机只有一次&#xff0c;那就是现在&#xff01;&#xff01;&#xff01; 文章目录…

【编译、链接、装载四】汇编知识补充——ATT 汇编语法、寄存器、指令、栈、栈帧

【编译和链接四】编译器后端——生成汇编代码 一、AT&T 汇编语法1、Intel 汇编2、AT&T汇编 二、x86寄存器1、x86通用寄存器2&#xff0e;其他寄存器3、寄存器的具体用途 三、常见的x86指令四、栈和栈帧 一、AT&T 汇编语法 AT&T VS Intel 基于 x86 架构 的处理…