Vue3-25-路由-路由的基本使用

news2024/11/17 0:05:27

对路由的理解

路由 : 就是前端对页面路径的拦截,根据不同的路径渲染不同的组件,
从而实现单页应用中的页面局部刷新的功能。

安装路由依赖

根据使用的不同的包管理工具采用不同的命令,
常见的三种包管理工具和对应的命令如下,
可以根据自己的情况进行选择使用。

npm install vue-router@4
or
yarn add vue-router@4
or 
pnpm install vue-router@4

路由的基本使用步骤

1、定义两个组件,用于路由切换时使用;
2、创建路由的配置对象 - 直接在一个单独的文件中写;
	2.1 配置 路径与组件 的对应关系;
	2.2 创建 路由配置 对象;
	2.3 导出路由配置对象;
3、挂载路由配置对象到 vue 的全局实例 app 上;
4、在页面中使用路由;
5、效果查看。

基本概念了解(必看)

router-linker : 相当于一个 <a> 标签,它有一个 [to] 属性,用于指定路由的地址,
[to] 属性指定的地址 需要和 路由配置中的路径对应起来,这样才可以正确加载对应的组件。

router-view : 显示 路由匹配到的组件。相当于一个占位符,匹配到路由的组件就渲染在这个占位符上。

基本使用案例

1、定义两个组件

组件A : componentA.vue

<template>
    <div class="diva">
        这是组件A
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
    .diva{
        width: 200px;
        height: 200px;
        background: red;
    }
</style>

组件B : componentB.vue

<template>
    <div class="divb">
        这是组件B
    </div> 
</template>

<script setup lang="ts">
</script>

<style scoped>
    .divb{
        width: 200px;
        height: 200px;
        background: green;
    }
</style>

2、创建路由配置文件

为了更方便的进行维护,单独把路由的配置放到一个文件中来。
文件的名字可以随便起,就是一个 js 或者 ts 文件即可。
本案例中,我们就为这个文件命名为 router.ts


// 导入 定义路由的两个方法
import {createRouter,createWebHistory}  from 'vue-router'

// 引入两个组件
import componentA from "./componentA.vue";
import componentB from "./componentB.vue";

// 声明路由跳转的路径与组件的对应关系
const routsList = [
    {path:'/a',component:componentA},
    {path:'/b',component:componentB},

]

// 创建路由的实例对象
const routerConfigObj = createRouter({
    history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀,不填默认是 / 
    routes:routsList // 指定路由的配置列表
})

// 导出路由的对象
export default routerConfigObj;

3、app 中挂载路由配置对象

项目中 对于 app实例 的配置都在 main.ts 文件中,
因此我们挂载路由也是在此文件中。

import { createApp } from 'vue'

// 导入 路由配置对象 - 本小节的核心模块
import  routerConfigObj  from './router'

// 根组件
import App from './App.vue'

// 创建应用实例
const app = createApp(App)

// 挂载路由组件 : 本小节的核心配置
app.use(routerConfigObj)

// 挂在应用,渲染页面,这一步应该是在最后执行的
app.mount("#app")

4、页面中使用路由

为了更简单的演示,对路由的使用直接在项目的 App.vue 中进行。

<template>
    <div class="basediv">
     
        APP.vue 中的 msg : {{ msg }}
        <br>   
        
        <!-- router-link 进行路由的导航 : to 属性指定路由的地址 -->
        <router-link to="/a">展示组件A</router-link>
        <br>
        <router-link to="/b">展示组件B</router-link>
        <br><br><br>
        
        <!-- router-view 进行目标组件的展示 : 根据路由的地址会渲染对应的组件 -->
        <router-view></router-view>
    
    </div>
    
</template>
    
<script setup lang="ts">

	// 引入 provide 方法
    import { ref } from 'vue'

    // 声明父组件的一个变量
    const msg = ref('这是App根组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 600px;
        height: 400px;
        border: 1px solid red;
    }
</style>

5、运行效果

无路由匹配的情况

在这里插入图片描述

匹配 组件A : 点击 router-link 或在导航栏中直接输入地址

在这里插入图片描述

匹配 组件B :点击 router-link 或在导航栏中直接输入地址

在这里插入图片描述

以上就完成了路由的基本使用。
主要实现的功能就是根据不同的路径渲染不同的组件。

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

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

相关文章

Hex文件介绍及制作

Hex文件介绍 一、文件格式介绍数据格式Hex文件例子常见类型字段 二、CRC校验计算eg.地址文件CRC计算:020000040127D2:0200000400FFFB eg.数据文件计算 三、生成hex文件用Excel生成 一、文件格式介绍 Hex文件是一种十六进制文件格式&#xff0c;可由notpad打开或者HexView app打…

【Hive_05】企业调优1(资源配置、explain、join优化)

1、 计算资源配置1.1 Yarn资源配置1.2 MapReduce资源配置 2、 Explain查看执行计划&#xff08;重点&#xff09;2.1 Explain执行计划概述2.2 基本语法2.3 案例实操 3、分组聚合优化3.1 优化说明&#xff08;1&#xff09;map-side 聚合相关的参数 3.2 优化案例 4、join优化4.1…

vivado 快速到慢速时钟之间的多循环

快速到慢速时钟之间的多循环 在下面的场景中&#xff0c;启动时钟CLK1是快速时钟&#xff0c;捕获时钟CLK2是慢时钟。如下图所示。 在下一示例中&#xff0c;启动时钟CLK1是快速时钟。捕获时钟CLK2较慢时钟假设CLK1是CLK2的频率的三&#xff08;3&#xff09;倍。如下图所示。…

docker小白第七天

docker小白第七天 tomcat安装 docker hub上面查找tomcat镜像 点进tomcat&#xff0c;可以看到下载镜像的命令。但是因为文件太大&#xff0c;并且是国外下载镜像很慢&#xff0c;所以我们从前期配置好的阿里云镜像仓库下载。 docker search tomcat docker pull tomcatdocker…

后端主流框架-SpringMvc-day2

Java中的文件下载 2 文件下载 文件下载&#xff1a;就是将服务器&#xff08;表现在浏览器中&#xff09;中的资源下载&#xff08;复制&#xff09;到本地磁盘&#xff1b; 2.1 前台代码 前台使用超链接&#xff0c;超链接转到后台控制器&#xff0c;在控制器通过流的方式…

Intel FPGA 技术开放日

概要 时间&#xff1a;2023.11.14 全天 &#xff08; 9:00 - 16: 20&#xff09; 地点&#xff1a;北京望京. 凯悦酒店 主题内容&#xff1a;分享交流了Intel FPGA 产品技术优势和落地实践方案。 会议的议程 开场致词&#xff1a; FPGA业务&#xff0c;是几年前intel收购而…

虚拟环境和Pycharm中均有transforms仍报ModuleNotFoundError:No module named ‘transformers‘

问题&#xff1a;运行新模型&#xff0c;配置了新环境&#xff0c;下载了包后&#xff0c;仍然报ModuleNotFoundError&#xff1a;No module named transformers 错误。 查看Pycharm解释器&#xff1a; 没问题&#xff01;&#xff01;&#xff01;&#xff1f; 命令行查看虚…

Flink Job 执行流程

Flink On Yarn 模式 ​ 基于Yarn层面的架构类似 Spark on Yarn模式&#xff0c;都是由Client提交App到RM上面去运行&#xff0c;然后 RM分配第一个container去运行AM&#xff0c;然后由AM去负责资源的监督和管理。需要说明的是&#xff0c;Flink的Yarn模式更加类似Spark on Ya…

Hive安装笔记——备赛笔记——2024全国职业院校技能大赛“大数据应用开发”赛项——任务2:离线数据处理

将下发的ds_db01.sql数据库文件放置mysql中 12、编写Scala代码&#xff0c;使用Spark将MySQL的ds_db01库中表user_info的全量数据抽取到Hive的ods库中表user_info。字段名称、类型不变&#xff0c;同时添加静态分区&#xff0c;分区字段为etl_date&#xff0c;类型为String&am…

【电商项目实战】基于SpringBoot完成首页搭建

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《电商项目实战》。&#x1f3af;&#x1f3af; &am…

【PyQt学习篇 · ⑭】:QTableView的使用

文章目录 QTableView的使用示例 QTableView的使用 QTableView 是 PyQt 中用于显示表格数据的窗口部件&#xff0c;它提供了一个灵活的方式来显示和编辑数据。下面是一些关于 QTableView 的使用的具体信息&#xff1a; 创建 QTableView 对象&#xff1a; from PyQt5.QtWidgets …

计算机网络基础:OSI参考模型是什么?

一、概述 OSI (Open Systems Interconnection Model,开放式系统互联模型)&#xff0c;由ISO ( International Organization for Standardization&#xff0c;国际标准化组织 ) 收录在ISO 7489标准中并于1984年发布。 意义&#xff1a; 在OSI没有出来之前我们的网络有如下问题…

Linux Debian12使用podman安装upload-labs靶场环境

一、upload-labs简介 PHP语言编写&#xff0c;持续收集渗透测试和CTF中针对文件上传漏洞的靶场&#xff0c;总共21关&#xff0c;每一关都包含着不同的上传绕过方式。 二、安装podman环境 Linux Debian系统如果没有安装podman容器环境&#xff0c;可以参考这篇文章先安装pod…

如何在vscode当中预览html文件运行结果

如何在vscode当中预览html文件运行结果 下载拓展内容打开拓展界面下载拓展 运行html文件参考内容 上一篇文章当中讲了如何实现在网页上对html文件的预览,但是这样子其实在运行代码的过程当中效果比较差,那么还需要可以实时预览运行的结果 下载拓展内容 打开拓展界面 下载拓展 …

微信小程序发放红包封面及领取

微信小程序发放红包封面及领取 一、微信红包封面开放平台配置发放的红包封面二、小程序后管平台设置配置录入红包封面奖品信息三、微信小程序调用接口效果 一、微信红包封面开放平台配置发放的红包封面 微信红包封面开放平台 红包封面的发放方式有&#xff1a;领取二维码、领…

unity 保存和加载窗口布局

这么简单的事网上一堆废话文章 右上角&#xff0c;Layout点开后有保存和删除 要切换布局点红框里的已经保存的布局

Linux下MQTT环境的简单应用及搭建——之Mosquitto

文章目录 前言一、ubuntu搭建mqtt服务器 | 概要二、整体架构流程 | 技术实现细节1、下载源码2、安装Mosquitto3、解压并修改配置文件4、关于Mosquitto常见的一些操作指令5、启动mosquitto6、测试mosquitto测试1&#xff1a;Linux多终端交互测试测试2&#xff1a;Linux与Windows…

2023安洵杯-秦岭防御军wp

reverse 感觉有点点简单## import base64 def ba64_decode(str1_1):mapp "4KBbSzwWClkZ2gsr1qAQu0FtxOm6/iVcJHPY9GNp7EaRoDf8UvIjnL5MydTX3eh"data_1 [0] * 4flag_1 [0] * 3for i in range(32, 127):for y in range(32, 127):for k in range(32, 127):flag_1[0]…

MIT线性代数笔记-第30讲-奇异值分解

目录 30.奇异值分解打赏 30.奇异值分解 奇异值分解&#xff08;简称 S V D SVD SVD分解&#xff09;可以将一个比较复杂的矩阵用更小更简单的几个子矩阵相乘来表示&#xff0c;这些小矩阵描述的都是矩阵的重要的特性。奇异值分解在图形降噪、推荐系统中都有很重要的应用。 对…

最优化考试之牛顿法

最优化考试之牛顿法 一、牛顿法1.问题条件2.求解过程3.例子 PS 一、牛顿法 1.问题条件 目标函数 f ( x ) f(x) f(x)&#xff0c;求极小值初始点 x 0 x_0 x0​精度要求e&#xff08;没有提就是近似0&#xff09; 2.求解过程 求解一阶雅克比矩阵 ∇ f ( x ) ∇f(x) ∇f(x)和二…