Vue3:快速上手路由器

本人在B站上关于vue3的尚硅谷的课程,以下是整理一些笔记。

一.路由器和路由的概念

在 Vue 3 中,路由(Router)和路由器(Router)是两个相关但不同的概念。

1. 路由(Router):
路由是指定义在 Vue 应用程序中的不同页面或视图之间的映射关系。每个路由对应着一个特定的 URL,当用户在应用程序中导航到不同的 URL 时,路由会告诉 Vue 哪个组件应该渲染到页面上。路由定义了应用程序的不同页面状态和导航逻辑。

2. 路由器(Router):
   路由器是一个 Vue 插件,它提供了在应用程序中使用路由的功能。Vue Router 是 Vue 官方提供的路由器实现,它允许你在 Vue 应用程序中构建 SPA(单页应用程序)并进行客户端路由。路由器负责解析 URL,根据路由配置将不同的组件渲染到正确的位置,并处理应用程序的导航。

通俗点解释:

路由器就像是一个导航系统,负责根据不同的网址告诉网站要显示哪个页面。它会监听浏览器的地址栏变化,一旦检测到地址发生改变,就会根据配置的路由规则找到对应的页面,并将其渲染到浏览器中。

总结来说,路由就是网站的不同页面,而路由器就是负责管理这些页面的工具。路由器根据地址栏中的网址来确定要显示的页面,并确保正确地加载和切换页面内容。
 

 

(该图来源尚硅谷) 

 一个路由器有多个路由:

(下图只是举例子解释,不是这种路由器)

二.制定导航区,展示区。

1.在src文件中定义components文件夹

2.在此文件夹定义三个组件:About.vue,Home.vue,News.vue

Header.vue只是起一个标题的作用,没有也可以。

 

以下是组件的源码: 

 About.vue

<template><div class="about"><h2>大家好,欢迎来到小李同学的博客</h2></div></template><script setup lang="ts" name="About">import {onMounted,onUnmounted} from 'vue'onMounted(()=>{console.log('About组件挂载了')})onUnmounted(()=>{console.log('About组件卸载了')})</script><style scoped>.about {display: flex;justify-content: center;align-items: center;height: 100%;color: rgb(85, 84, 84);font-size: 18px;}</style>

Home.vue 

<template><div class="home"><img src="http://www.atguigu.com/images/index_new/logo.png" alt=""></div></template><script setup lang="ts" name="Home"></script><style scoped>.home {display: flex;justify-content: center;align-items: center;height: 100%;}</style>

 


News.vue 

<template><div class="news"><ul><li><a href="#">新闻001</a></li><li><a href="#">新闻002</a></li><li><a href="#">新闻003</a></li><li><a href="#">新闻004</a></li></ul></div></template><script setup lang="ts" name="News"></script><style scoped>/* 新闻 */.news {padding: 0 20px;display: flex;justify-content: space-between;height: 100%;}.news ul {margin-top: 30px;list-style: none;padding-left: 10px;}.news li>a {font-size: 18px;line-height: 40px;text-decoration: none;color: #64967E;text-shadow: 0 0 1px rgb(0, 84, 0);}.news-content {width: 70%;height: 90%;border: 1px solid;margin-top: 20px;border-radius: 10px;}</style>

 Header.vue

<template><h2 class="title">Vue路由测试</h2></template><script setup lang="ts" name="Header"></script><style scoped>.title {text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, gray, white);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px;}</style>

 

三.制定路由器

1.在src文件中新建好router(路由器)文件夹

2.在文件夹中建立index.ts文件

3.在index.ts文件里面制定路由规则

index.ts

//创建一个路由器并暴露出去//第一步:引入creatRouter
import{createRouter,createWebHistory} from'vue-router'
//引入一个一个可能要呈现的组件
import Home from '@/components/Home.vue'
import About from '@/components/About.vue'
import News from '@/components/News.vue'//第二步:创建路由器const router = createRouter({history:createWebHistory(),//路由器的工作模式routes:[//一个个的路由规则 {path:'/home',component:Home},{path:'/about',component:About},{path:'/news',component:News},]
})export default router//定义好后暴露出去router

createRouter:

 Vue Router 提供的一个函数,用于创建路由器实例。

 createWebHistory:

 createWebHistory 是一个用于创建基于 HTML5 History 模式的路由历史记录管理器的函数,它在 Vue Router 中用于配置路由器的工作模式。

代码解析:

  1. 引入了 createRouter 和 createWebHistory 方法,这两个方法是从 vue-router 包中导入的。这些方法将用于创建路由器实例和指定路由器的工作模式。

  2. 引入要呈现的组件,包括 HomeAbout 和 News 组件。这些组件将在不同的路由下进行渲染。

  3. 使用 createRouter 方法创建了一个路由器实例,并传入了一个配置对象作为参数。配置对象中的 history 属性使用了 createWebHistory()

  4. 在配置对象的 routes 属性中,定义一系列的路由规则。每个路由规则都是一个对象,包含了 path 和 component 属性。path 表示要匹配的 URL 路径,component 表示该路由对应的组件。

  5. 最后,通过 export default router 将定义好的路由器实例暴露出去,以便在其他地方使用。(一定要暴露,否则等于没写)

 

 四.路由器在App.vue组件中使用        

<!-- App.vue 有三种标签,html(结构标签) ,script(交互标签) ,style(样式,用于好看) --><template><div class = 'app'><Header/><!-- 导航区 --><div class = 'navigate'><RouterLink to = '/home'active-class="active" >首页</RouterLink><RouterLink to = '/news'active-class="active" >新闻</RouterLink><RouterLink to = '/about'active-class="active " >关于</RouterLink></div><!-- 展示区 --><div class = 'main-content'><RouterView></RouterView></div></div></template><script lang="ts" setup name = "App">import { RouterView,RouterLink} from 'vue-router'; 
import Header from './components/Header.vue'</script>
<style>/* App */.navigate {display: flex;justify-content: space-around;margin: 0 100px;}.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: gray;text-decoration: none;color: white;font-size: 18px;letter-spacing: 5px;}.navigate a.active {background-color: #64967E;color: #ffc268;font-weight: 900;text-shadow: 0 0 1px black;font-family: 微软雅黑;}.main-content {margin: 0 auto;margin-top: 30px;border-radius: 10px;width: 90%;height: 400px;border: 1px solid;}
</style>

<RouterView>:

 组件是 Vue Router 提供的一个用于动态渲染路由组件的组件。

例如,当路由路径为 /home 时,路由器配置中定义的路由规则,将 Home 组件渲染到 <div class="main-content"> 内部。同样的,当路由路径为 /news 时,会渲染 News 组件,当路由路径为 /about 时,会渲染 About 组件。

 active-class:

通过 <RouterLink>,你可以在应用程序中创建导航链接,使用户能够点击链接并导航到不同的路由。

代码解析:

<template>标签用于定义组件的结构部分,也就是 HTML 部分。在这个例子中,<template> 中包含了整个组件的结构,包括一个 div 元素作为根容器,其中包含了一个名为 Header 的组件、导航区域和展示区域。

<script>标签用于定义组件的交互部分,也就是 JavaScript 部分。在这个例子中,<script>中使用了 import语句引入了 RouterView 和 RouterLink 组件,这是来自 Vue Router 的组件。同时,还引入了一个名为 Header的组件。

<style>标签用于定义组件的样式部分,也就是 CSS 部分。在这个例子中,<style> 中定义了一些样式规则,包括导航区域和展示区域的样式。

五.展示路由

在导航区点击首页,路由器会找到/home的路由,并把它渲染到展示区。

在导航区点击新闻,路由器会找到/news的路由,并把它渲染到展示区。 

 在导航区点击关于,路由器会找到/about的路由,并把它渲染到展示区。

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

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

相关文章

LeetCode.2908. 元素和最小的山形三元组 I

题目 2908. 元素和最小的山形三元组 I 分析 首先&#xff0c;看到这道题&#xff0c;第一反应就是暴力方法&#xff0c;三层for循环&#xff0c;枚举每一种情况&#xff0c;代码如下 class Solution {public int minimumSum(int[] nums) {int min Integer.MAX_VALUE;for(i…

基于Springboot的学生选课系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的学生选课系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

线程池详解、核心参数、拒绝策略

什么是线程池 线程池是一种池化技术&#xff0c;它预先创建一组线程&#xff0c;用于执行异步任务。当有新任务到来时&#xff0c;线程池可以立即分配一个线程来处理&#xff0c;而不需要临时创建。这样可以减少因为频繁创建和销毁线程而导致的开销。 线程池的应用场景 高并…

2024年腾讯云4核8G12M轻量应用服务器测评_CPU内存带宽系统盘

腾讯云4核8G服务器价格&#xff1a;轻量4核8G12M优惠价格646元15个月、CVM S5服务器4核8G配置1437元买1年送3个月。腾讯云4核8G服务器支持多少人同时在线&#xff1f;支持30个并发数&#xff0c;可容纳日均1万IP人数访问。腾讯云百科txybk.com整理4核8G服务器支持多少人同时在线…

什么是技术分析和EA技术?澳福一个提醒丰厚收益

技术分析是指根据炒外汇市场汇率走势的过去表现&#xff0c;借助技术分析工具预测汇率的未来趋势并确定入市、出市策略的预测分析方法。 它是以预测市场价格变化的未来趋势为目的&#xff0c;以市场行为(外汇市场的价格和交易量)的图形、图表、形态、指标为手段&#xff0c;使用…

docker通过已有镜像打包执行

1、查看已有镜像 docker images 2、制作dockerfile FROM python LABEL maintainer"JETZ" add . / WORKDIR /3、新建镜像 docker build -t python3.7.13 .4、打包导出镜像 docker save python3.7.13 -o /opt/python3.7.13.tar5、重新加载镜像 cd /opt docker l…

电商系列之取消订单

> 插&#xff1a;AI时代&#xff0c;程序员或多或少要了解些人工智能&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 坚持不懈&#xff0c;越努力越幸运&#xff0c;大家…

SOA-面向服务架构

SOA-面向服务架构 1.概述2.SOA的设计原则包括&#xff1a;3. SOA实现方法1.Web Service2. 服务注册表3. 企业服务总线 细讲 超赞笔记 1.概述 SOA &#xff08;Service-Oriented Architecture&#xff0c;SOA&#xff09;&#xff0c;从应用和原理的角度&#xff0c;目前有2种…

Matlab之提高交叉定位点的定位精度

通过测向交叉定位的方法&#xff0c;按理只需2根测向线即可得出定位点的位置。但由于误差的存在&#xff0c;求出的定位点位置存在一定的偏差。为了得到更加精确的定位点位置&#xff0c;需要对定位点进行冗余测量&#xff0c;从而得到多个定位点&#xff0c;然后通过定位点估计…

GRE和MGRE综合实验

实验拓扑图 实验思路 根据图中所属网段&#xff0c;配置ip地址和网关R1,R2,R3,R4配置缺省路由&#xff0c;可以是公网互通使用ppp验证&#xff0c;R1与R5为PAP验证&#xff0c;R5:aaa地址池&#xff0c;创建用户名以及密码&#xff0c;同时进行pap服务认证&#xff0c;同时在…

使用nvm管理nodejs版本

文章目录 1、下载NVM2、选择NVM安装3 、查询版本号&常用命令4、nvm命令安装指定版本node4.1 安装指定node4.2 查看是否安装成功4.3 切换node版本到你想要的版本4.4 再次查看nvm版本列表4.5 nvm其他常用命令 这个是每个全能前端经常会用到的&#xff0c;之前用过现在重装了&…

BitVM2:比特币上的无需许可验证

1. 引言 前序博客有&#xff1a; 基于BitVM的乐观 BTC bridgeBitVM&#xff1a;Bitcoin的链下合约Bitcoin Bridge&#xff1a;治愈还是诅咒&#xff1f; 最初的 BitVM 设计仅限于两方设置。BitVM2结合了并行和冗余实例&#xff0c;以引入基于 1-of-n 诚实假设的多方配置。这…

Android 自定义EditText

文章目录 Android 自定义EditText概述源码可清空内容的EditText可显示密码的EditText 使用源码下载 Android 自定义EditText 概述 定义一款可清空内容的 ClearEditText 和可显示密码的 PasswordEditText&#xff0c;支持修改提示图标和大小、背景图片等。 源码 基类&#xf…

WebViz可视化

WebViz可视化 Webviz是一个基于Web的可视化工具&#xff0c;意味着您可以通过浏览器/APP访问它&#xff0c;而不需要安装额外的软件。这对于远程访问和团队协作非常方便。 Foxglove是一个开源的工具包&#xff0c;包括线上和线下版。旨在简化机器人系统的开发和调试。它提供了…

Gitea 的详细介绍

什么是 Gitea&#xff1f; Gitea 是一个开源、轻量级的自托管 Git 服务&#xff0c;它允许用户搭建类似于 GitHub 或 GitLab 的代码托管平台。由于采用 Go 语言开发&#xff0c;Gitea 具有高效的性能和跨平台特性&#xff0c;适合个人开发者或小团队使用。 Gitea 的特点 轻量…

蓝桥杯第十三届电子类单片机组程序设计

目录 前言 单片机资源数据包_2023 一、第十三届比赛省赛 1.比赛题目 2.赛题解读 二、部分功能实现 1.继电器的开启与关闭 2.长按切换显示状态功能的实现 3.对于温度传感器小数部分的处理 4.其他处理 1&#xff09;关于数码管显示小数的处理 2&#xff09;关于5s后继…

结构体类型,结构体变量的创建和初始化 以及结构中存在的内存对齐

一般结构体类型的声明 struct 结构体类型名 { member-list; //成员表列 }variable-list; //变量表列 例如描述⼀个学⽣&#xff1a; struct Stu { char name[20]; //名字 int age; //年龄 char sex[5]; //性别 }&#xff1b; //结构体变量的初始化 int main() { S…

牛客NC30 缺失的第一个正整数【simple map Java,Go,PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/50ec6a5b0e4e45348544348278cdcee5 核心 Map参考答案Java import java.util.*;public class Solution {/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可…

Modelsim手动仿真实例

目录 1. 软件链接 2. 为什么要使用Modelsim 3. Modelsim仿真工程由几部分组成&#xff1f; 4. 上手实例 4.1. 新建文件夹 4.2. 指定目录 4.3. 新建工程 4.4. 新建设计文件&#xff08;Design Files&#xff09; 4.5. 新建测试平台文件&#xff08;Testbench Files&…

企业数据被新型.rmallox勒索病毒加密,应该如何还原?

.rmallox勒索病毒为什么难以解密&#xff1f; .rmallox勒索病毒难以解密的主要原因在于其采用了高强度的加密算法&#xff0c;并且这些算法被有效地实施在了病毒程序中。具体来说&#xff0c;.rmallox勒索病毒使用了RSA和AES这两种非常成熟的加密算法。RSA是一种非对称加密算法…