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. 引入要呈现的组件，包括 Home、About 和 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://xiahunao.cn/news/2906540.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

本地部署的stable diffusion 如何更新controlnet？

本地部署的stable diffusion 如何更新controlnet？

stable diffusion 未启动状态 点击“版本管理” 点击“扩展” 找到controlnet&#xff0c;点击右边的“更新”按钮 完成&#xff01;
阅读更多...
VBA技术资料MF135：多值匹配查找

VBA技术资料MF135：多值匹配查找

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。“VBA语言専攻”提供的教程一共九套&#xff0c;分为初级、中级、高级三大部分&#xff0c;教程是对VBA的系统讲解&#…
阅读更多...
Windows系统下ESP-IDF环境的搭建

Windows系统下ESP-IDF环境的搭建

第一步&#xff1a;clone项目&#xff0c;建议是下到"Desktop\esp-idf"的路径 下载地址&#xff1a;https://github.com/espressif/esp-idf 第二步&#xff1a;在VSCode下载ESP-IDF插件 第三步&#xff1a;在Setup页面选择第一个选项EXPRESS 参考文档&#xff1a;h…
阅读更多...
#Linux系统编程（共享内存）

#Linux系统编程（共享内存）

&#xff08;一&#xff09;发行版&#xff1a;Ubuntu16.04.7 &#xff08;二&#xff09;记录&#xff1a; &#xff08;1&#xff09;什么是共享内存 共享内存是System V版本的最后一个进程间通信方式。共享内存&#xff0c;顾名思义就是允许两个不相关的进程访问同一个逻辑…
阅读更多...
Unity AI Navigation自动寻路

Unity AI Navigation自动寻路

目录 前言一、Unity中AI Navigation是什么&#xff1f;二、使用步骤1.安装AI Navigation2.创建模型和材质3.编写向目标移动的脚本4.NavMeshLink桥接组件5.NavMeshObstacle组件6.NavMeshModifler组件 三、效果总结 前言 Unity是一款强大的游戏开发引擎&#xff0c;而人工智能&a…
阅读更多...
Docker安装xxl-job并整合到SpringBoot项目

Docker安装xxl-job并整合到SpringBoot项目

1. 创建数据库 执行如下SQL语句创建相关表 CREATE database if NOT EXISTS xxl_job default character set utf8mb4 collate utf8mb4_general_ci; use xxl_job;SET NAMES utf8mb4; CREATE TABLE xxl_job_info (id int(11) NOT NULL AUTO_INCREMENT,job_group int(11) NOT NUL…
阅读更多...
农学院智慧农业产教融合基地解决方案

农学院智慧农业产教融合基地解决方案

第一章 背 景 1.1国际数字农业发展概况 随着全球信息化、智能化技术的快速发展&#xff0c;数字农业作为现代农业发展的重要方向&#xff0c;正日益受到国际社会的广泛关注。数字农业依托物联网、大数据、云计算、人工智能等现代信息技术&#xff0c;实现农业生产全过程的智能…
阅读更多...
【Go】四、包名、访问范围控制、标识符、运算符

【Go】四、包名、访问范围控制、标识符、运算符

文章目录 1、_2、包名3、命名大小影响可访问范围4、运算符5、获取终端输入 1、_ 下划线"_"本身在Go中是一个特殊的标识符&#xff0c;称为空标识符用于忽略某个值 1&#xff09;忽略导入的没使用的包 2&#xff09;忽略某个返回值 2、包名 main包是程序的入口包&a…
阅读更多...
AI多模型、算力调度与智能分析AI算法中台介绍及应用

AI多模型、算力调度与智能分析AI算法中台介绍及应用

TSINGSEE青犀AI算法中台是一款平台型产品&#xff0c;专注于提供各行业中小场景中部署解决方案。平台具备接入广、性能强、支持跨平台、芯片国产化等特点&#xff0c;可提供丰富的视图接入能力和智能分析能力。平台将不同类型、不同协议前端设备&#xff0c;支持通过不同网络环…
阅读更多...
【Docker】Docker安全与最佳实践：保护你的容器化应用程序

【Docker】Docker安全与最佳实践：保护你的容器化应用程序

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…
阅读更多...
KOSMOS-2.5: A Multimodal Literate Model

KOSMOS-2.5: A Multimodal Literate Model

KOSMOS-2.5: A Multimodal Literate Model 相关链接&#xff1a;arXiv 关键字&#xff1a;multimodal、literate model、text-intensive images、Transformer architecture、document-level text recognition 摘要 我们介绍了KOSMOS-2.5&#xff0c;这是一个用于机器阅读文本密…
阅读更多...
“免密支付”出事了？看看背后的安全隐患

“免密支付”出事了？看看背后的安全隐患

#免密支付# 的安全问题近日冲上热搜&#xff0c;大家来看看怎么一回事。 “我不知道什么时候开通的‘免密支付’功能&#xff0c;直到手机频繁收到账单提醒&#xff0c;才发现平台账号被盗&#xff0c;对方通过‘免密支付’消费了5000多元。这种事关会员安全的操作提示应该设置…
阅读更多...
电子声子耦合激光器可拓展激光波长范围 相关研究成果不断增多

电子声子耦合激光器可拓展激光波长范围 相关研究成果不断增多

电子声子耦合激光器可拓展激光波长范围 相关研究成果不断增多 电子声子耦合激光器&#xff0c;采用电子声子耦合效应制造而成&#xff0c;突破了传统荧光光谱激光输出局限&#xff0c;拓展了激光波长范围&#xff0c;可实现精准波长调控&#xff0c;为可调谐全固态激光器提供了…
阅读更多...
CentOS使用Docker部署Halo并结合内网穿透实现公网访问本地博客

CentOS使用Docker部署Halo并结合内网穿透实现公网访问本地博客

文章目录 1. Docker部署Halo1.1 检查Docker版本如果未安装Docker可参考已安装Docker步骤&#xff1a;1.2 在Docker中部署Halo 2. Linux安装Cpolar2.1 打开服务器防火墙2.2 安装cpolar内网穿透 3. 配置Halo个人博客公网地址4. 固定Halo公网地址 本文主要介绍如何在CentOS 7系统使…
阅读更多...
Antd Vue3 使用 Anchor 锚点组件记录

Antd Vue3 使用 Anchor 锚点组件记录

项目场景 客户要求做一个表单页面&#xff0c;表单数据分为三步&#xff0c;每一步骤是一个单独的 Vue 组件&#xff0c;表单上方需要使用锚点组件实现锚点定位到每一步的功能。 代码总览 <template><div class"guided-form-content-wrapper"><!-- …
阅读更多...
【Go】结构体中Tag标识

【Go】结构体中Tag标识

https://blog.csdn.net/weixin_45193103/article/details/123876319 https://blog.csdn.net/qq_49723651/article/details/122005291 https://juejin.cn/post/7005465902804123679 学一点&#xff0c;整一点&#xff0c;基本都是综合别人的&#xff0c;弄成我能理解的内容 Tag定…
阅读更多...
FMEA与智能机器人：提升机器人可靠性与安全性的关键

FMEA与智能机器人：提升机器人可靠性与安全性的关键

随着科技的飞速发展&#xff0c;智能机器人已经深入到我们生活的方方面面&#xff0c;从工业生产到家庭服务&#xff0c;从深海探险到太空探索&#xff0c;处处都有它们的身影。然而&#xff0c;随着应用的日益广泛&#xff0c;机器人系统的复杂性和不确定性也在增加&#xff0…
阅读更多...
基于Springboot+Vue的酒店管理系统！新鲜出炉，可商用，带源码

基于Springboot+Vue的酒店管理系统！新鲜出炉，可商用，带源码

新年了给大家分享一套基于SpringbootVue的酒店管理系统源码&#xff0c;在实际项目中可以直接复用。(免费提供&#xff0c;文末自取) 一、系统运行图&#xff08;管理端和用户端&#xff09; 1、管理登陆 2、房间管理 3、订单管理 4、用户登陆 5、房间预定 二、系统搭建视频教…
阅读更多...
掌握html这一篇就够了

掌握html这一篇就够了

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、HTML是什么&#xff1f;二、基础标签6个标题标签6级标题其他基础标签 8种文本标签6种表格标签4种表格标签基础标签修饰 4种媒体标签a标签img:图片audio&…
阅读更多...
Vue中的一些指令与计算方法

Vue中的一些指令与计算方法

语法 插值语法 HTML的双标签内容中使用&#xff0c;在{{}}之内书写JS代码 属性语法 1.v-bind或: 2.:属性名"值"或v-bind"值" 事件语法 v-on或 v-on:事件名"方法名"或事件名"方法名" 选项 选项&#xff1a;可选的配置项——官方…
阅读更多...
最新文章

Copyright @ 2022~2023