【路由組件】

news/2024/7/20 16:48:18/文章来源:https://blog.csdn.net/ike_kenny/article/details/139149757

完成Vue Router 安装后,就可以使用路由了,路由的基本使用步骤,首先定义路由组件,以便使用Vue Router控制路由组件展示与 切换,接着定义路由链接和路由视图,以便告知路由组件渲染到哪个位置,然后再项目中创建路由模块,最后导入并挂载路由模块。
接下来通过实际操作方式演示Vue Router使用方法。
1.定义路由组件

在src \components 目录下创建2个组件,分别为Home
组件和About组件,用于演示组件切换效果,文件名为Home.vue和About.vue

Home.vue文件代码如下:

<template><div class="home-container"><h3>Home组件</h3></div>
</template>
<style scoped>.home-container{min-height:150px;background-color:#f2f2f2;padding:15px;}
<yle>

About.vue文件代码如下:

<template><div class="home-container"><h3>Home组件</h3></div>
</template>	
<style scoped>.about-container{min-height:150px;background-color:#f2f2f2;padding:15px;}
<yle>

定义路由链接和路由视图

为了在页面中将路由对应的组件显示出来,还要在App组件中定义路由视图。路由视图标签定义,该标签会被渲染成当前路由对应组件,另外,为了方便在不同组件之间切换,可以通过标签定义路由链接,该标签的to属性表示链接地址,与路由匹配规则中的path属性对应。

在src\App.vue文件中定义路由视图以及Home组件和About组件路由链接,具体代码如下。

<template><div class="home-container"><h1>App根组件</h1><router-link to="/home">首页</router-link><router-link to="/about">关于</router-link><hr><router-view></router-view></div>
</template>	<style scoped>.app-container{text-align:center;font-size:16px;}.app-container a {padding:10px;color:#000;
}.app-container a.routerr-link-active{color:#fff;background-color:#000;
}
<yle>

上述代码:第4行通过to属性定义Home组件链接地址为“/Home”,与路由匹配规则中path属性值“home”对应,第7行代码使用标签渲染当前路由对应组件,19-22行代码用于激活路由链接设置高亮样式。

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

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

相关文章

Java三种方法实现多线程,继承Thread类,实现Runnable接口,实现Callable接口

目录 线程&#xff1a; 继承Thread类&#xff1a; 实现Runnable类&#xff1a; 实现Callable接口&#xff1a; 验证多线程&#xff1a; 线程&#xff1a; 定义&#xff1a;进程可以同时执行多个任务&#xff0c;每个任务就是线程。举个例子&#xff1a;一个Java程序&#…

23种设计模式顺口溜

口诀&#xff1a; 原型 抽风 &#xff0c;单独 建造 工厂 &#xff08;寓意&#xff1a;&#xff08;这里代指本来很简单的东西&#xff0c;却要干工厂这里复杂的业务&#xff09; 抽风&#xff1a;抽象工厂单独&#xff1a;单例桥代理组合享元适配器&#xff0c;&#xff0…

Modbus协议基础

文章目录 Modbus概述Modbus TCP/IP Modbus概述 Modbus是由Modicon&#xff08;现为施耐德电气公司的一个品牌&#xff09;在1979年发明的&#xff0c;是全球第一个真正用于工业现场的应用层总线协议。 为更好地普及和推动Modbus在基于以太网上的分布式应用&#xff0c;目前施…

[STM32-HAL库]ADC采集-DMA中断采集-平均值滤波-STM32CUBEMX开发-HAL库开发系列-主控STM32F103C8T6

目录 一、前言 二、实现步骤 1.STM32CUBEMX配置 2.Keil工程程序设计 三、结语 一、前言 本文通过STM32CUBEMX实现对ADC的数据采集和滤波操作&#xff0c;帮助各位开发者完成与模拟量输入的采集工作。 二、实现步骤 1.STM32CUBEMX配置 以STM32F103C8T6为例&#xff0c;打开S…

微信小程序上传包过大的最全解决方案!

微信小程序的发布大小限制是2MB。然而一个程序怎么能这么小&#xff1f; 介绍一下项目中的经验。 新项目 如果是刚开始做的新项目&#xff0c;一定确定好自己要用的Ui框架&#xff0c;而且确定之后&#xff0c;千万不要引入别的&#xff0c;否则占大小&#xff01;&#xff0…

6.Redis之String命令

1.String类型基本介绍 redis 所有的 key 都是字符串, value 的类型是存在差异的~~ 一般来说,redis 遇到乱码问题的概率更小~~ Redis 中的字符串,直接就是按照二进制数据的方式存储的. (不会做任何的编码转换【讲 mysql 的时候,知道 mysql 默认的字符集, 是拉丁文,插入中文…

sheng的学习笔记-AI-EM算法

AI学习笔记目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 目录 基础知识 什么是EM算法 EM算法简介 数学知识 极大似然估计 问题描述 用数学知识解决现实问题 最大似然函数估计值的求解步骤 Jensen不等式 定义 EM算法详解 问题描述 EM算法推导流程 EM算法流程…

java并发工具类都有哪些

Java中的并发工具类包括&#xff1a; CountDownLatch CountDownLatch允许一个或多个线程等待其他线程完成某些操作。它通常用于线程间的同步&#xff0c;例如在一个线程完成其工作后通知其他线程继续执行。 CyclicBarrier CyclicBarrier是一个同步辅助类&#xff0c;它允许一…

tomcat--安全配置多虚拟机

端口8005/tcp 安全配置管理 8005是Tomcat的管理端口&#xff0c;默认监听在127.0.0.1上。无需验证就可发送SHUTDOWN (大小写敏感)这个字符串&#xff0c;tomcat接收到后就会关闭此Server。此管理功能建议禁用&#xff0c;可将SHUTDOWN改为一串猜不出的字符串实现或者port修改成…

web学习笔记(五十六)

目录 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名 1.1.2 绑定多个类名 1.2 style相关知识 2. vue的响应式原理 3. v-once 4.本地搭建Vue单页应用 4.1 安装Vue脚手架 4.2 安装对应的包文件 4.3 运行项目 1.绑定类名和style 1.1 绑定类名 1.1.1 绑定单个类名…

几个速度比较快的 Linux 开源镜像站及支持的资源列表

搜狐开源镜像站 https://mirrors.sohu.com/ File Name CPAN/ FreeBSD/ QpenBSD/ RockyL apache/ archlinux/ centos/ ceph/ cygwin/ debian/ debian–cd/ debian-security/ deepin/ deepin-cd/ docker-ce/ fedora/ fedora-epel/ gentoo/ lib/ mysql/ nginx/ opensuse/ php/ ubu…

关于学习Go语言的并发编程

开始之前&#xff0c;介绍一下​最近很火的开源技术&#xff0c;低代码。 作为一种软件开发技术逐渐进入了人们的视角里&#xff0c;它利用自身独特的优势占领市场一角——让使用者可以通过可视化的方式&#xff0c;以更少的编码&#xff0c;更快速地构建和交付应用软件&#…

Java | Leetcode Java题解之第99题恢复二叉搜索树

题目&#xff1a; 题解&#xff1a; class Solution {public void recoverTree(TreeNode root) {TreeNode x null, y null, pred null, predecessor null;while (root ! null) {if (root.left ! null) {// predecessor 节点就是当前 root 节点向左走一步&#xff0c;然后一…

Python批量docx或doc文档转换pdf

说明&#xff1a; 1、因为项目需要&#xff0c;需要手动将十几个word文档转换成pdf文档 2、python请安装3.9.0以上&#xff0c;否则一些依赖库无法正常用 #! /usr/bin/python3 # -*- coding: utf-8 -*-import os import comtypes.client# 批量将docx文件转换pdf文件 def docx_t…

链表经典题目—相交链表和链表倒数第k个节点

&#x1f389;&#x1f389;&#x1f389;欢迎莅临我的博客空间&#xff0c;我是池央&#xff0c;一个对C和数据结构怀有无限热忱的探索者。&#x1f64c; &#x1f338;&#x1f338;&#x1f338;这里是我分享C/C编程、数据结构应用的乐园✨ &#x1f388;&#x1f388;&…

Java中Spring MVC 来如何接收表单数据

目录 一、Java语言介绍 二、Spring MVC 框架介绍 三、什么是表单 四、Spring MVC 来如何接收表单数据 一、Java语言介绍 Java是一种广泛使用的面向对象的编程语言&#xff0c;由Sun Microsystems公司的James Gosling等人开发。它最初于1995年发布&#xff0c;被设计为具有…

字符串和字符串函数(1)

前言&#xff1a; 字符串在C语言中比较特别&#xff0c;没有单另的字符串类型&#xff0c;想要初始化字符串必须用字符变量的数组初始化&#xff0c;但是在C语言标准库函数中提供了大量能对字符串进行修改的函数&#xff0c;比如说可以实现字符串的的拷贝&#xff0c;字符串的追…

【C++初阶】—— 类和对象 (上)

&#x1f4dd;个人主页&#x1f339;&#xff1a;EterNity_TiMe_ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 类和对象 1. 初步认识C2. 类的引入3. 类的定义声明和定义全部放在类体中声明和定义分开存放 4.…

4月冰箱行业线上市场销售数据分析

家电行业内卷现象严重&#xff0c;企业之间在价格、营销和服务上进行激烈竞争&#xff0c;这种竞争态势可能导致整体家电市场需求承压&#xff0c;这需要品牌方做好一定的心理准备。尽管如此&#xff0c;消费者对于冰箱的需求还是以更新换代为主导&#xff0c;行业后市仍有较大…

深圳比创达电子EMC|EMC电磁兼容性行业:挑战与机遇并存

随着电子技术的迅猛发展&#xff0c;电磁兼容性&#xff08;EMC&#xff09;已成为各行各业不可忽视的关键问题。EMC是指设备或系统在其电磁环境中能正常工作且不对该环境中任何事物构成不能承受的电磁骚扰的能力。 一、EMC电磁兼容性行业的现状 EMC电磁兼容性行业作为电子技…