聊聊Vue中的Router(路由)

  • Vue构造的是一个单页面应用

    在 Vue 中,router(路由)用于定义应用的不同页面路径和组件之间的映射关系,通过路由从而实现页面的切换和导航功能

  • vue中所有的xxx.vue文件,都是路由组件,这些组件都会被vue读取,并编译成一段div结构,挂载在唯一的html中,所以想要实现组件之间的切换很简单

    但是想要将某些组件使用当成页面(每个页面对应的url都是唯一的)使用,默认情况是不能使用的那么我们需要将代码片段切换模拟成页面切换的手段,这就是vue-router

动画.gif

接下来我们讲解一下如何在项目中使用路由

  • 首先我们需要安装一下依赖,并将路由配置在vue里面
  npm install vue-router@4

安装成功后,将他配置在自己项目中

import router from './router/index'const app = createApp(App)app.use(router)app.mount('#app')

现在我们的项目就集成里router

一级路由

接下来我们讲解如何使用路由
模拟实现掘金这个页面的一级路由切换

首先我们在项目中创建一个router文件夹,在里面创建一个index.js文件

image.png

在index.js代码书写

import { createRouter, createWebHistory } from "vue-router";
import Home from "../pages/Home.vue";
import Bot from "../pages/Bot.vue";const routes = [{path: "/home",component: Home,},{path: "/bot",component: Bot,},{path: "/hot",component: () => import("../pages/Hot.vue"),},
];const router = createRouter({history: createWebHistory(),routes: routes,
});export default router;

这段代码我们创建了三个路由,分别是首页、bot、沸点

首先我们创建简易一个导航栏

<template><div><nav><router-link to="/home">首页|</router-link><router-link to="/bot">bot|</router-link><router-link to="/hot">沸点|</router-link></nav><!-- 页面 --><router-view></router-view></div>
</template>

image.png

然后创建三个要跳转的页面

image.png

这样我们就实现了一级路由跳转了

动画.gif

二级路由

那么如何使用二级路由呢?

  • 首先需要创建对应的组件

image.png

  • 修改home页面的代码
<template><div><h2>home</h2><div class="nav"><RouterLink to="/home/newest" >最新</RouterLink><RouterLink to="/home/suggest">推荐</RouterLink></div><RouterView></RouterView></div>
</template>

添加了两个路由跳转

image.png

  • 接下来就是重点,如何配置路由了
{path: "/home",component: Home,children: [{path: "/home/newest",component: Newest,},{path: "/home/suggest",component: Suggest,},],},

这段路由配置代码定义了一个父路由 /home ,并且为它配置了两个子路由 /home/newest/home/suggest

当访问 /home 路径时,会渲染 Home 组件。当访问 /home/newest 路径时,会在 Home 组件的内部渲染 Newest 组件。同理,访问 /home/suggest 路径时,会在 Home 组件的内部渲染 Suggest 组件

现在就能实现二级路由跳转了

动画.gif

总结

通过本文,我们对路由的理解就更加的深刻了

Vue构造的是一个单页面应用,它只有一个html页面,想要将某些组件使用当成页面(每个页面对应的url都是唯一的)使用,默认情况是不能使用的那么我们需要将代码片段切换模拟成页面切换的手段,这就是vue-router(路由)

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

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

相关文章

【物联网】NB-IoT

目录 一、什么是NBIOT 二、NB-IoT的特点 三、NBIOT的工作状态 四、移远NB-IoT模块及AT指令 一、什么是NBIOT NB-IoT&#xff08;Narrow Band Internet of Things&#xff09;窄带物联网&#xff0c;构建于蜂窝网络&#xff0c;所占用的带宽很窄&#xff0c;只需约180KHz&am…

基于NURBS曲线的数据拟合算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1NURBS曲线基础 4.2 数据拟合原理 5.完整程序 1.程序功能描述 基于NURBS曲线的数据拟合算法,非均匀有理B样条&#xff08;Non-Uniform Rational B-Splines&#xff0c;简称NURBS&#xf…

rapidjson源码解析

基础组件 #mermaid-svg-HpR2Zha3TK2OHfEW {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-HpR2Zha3TK2OHfEW .error-icon{fill:#552222;}#mermaid-svg-HpR2Zha3TK2OHfEW .error-text{fill:#552222;stroke:#552222;}#…

史上最强面试题,拿大厂京东,阿里offer全靠它。程序员必看。

答&#xff1a;对于short s1 1; s1 s1 1;由于1是int类型&#xff0c;因此s11运算结果也是int 型&#xff0c;需要强制转换类型才能赋值给short型。而short s1 1; s1 1;可以正确编译&#xff0c;因为s1 1;相当于s1 (short)(s1 1);其中有隐含的强制类型转换。 #6、Java 有…

Java学习 (二)关键字、标识符、数组

一、关键字 我们第一章案例中有很多关键字&#xff0c;比如class、public、static、void等&#xff0c;这些关键字依旧被java定义好了&#xff0c;可以拿来用&#xff0c;不需要死记硬背&#xff0c;按照官方文档查询即可 #官方文档 https://docs.oracle.com/javase/tutorial/j…

瑞吉外卖问题(待更新...

文章目录 一、session注册时二、用户增加时三、RequestBody3.1 Long问题3.2 RequestBody3.3 UpdataById 一、session注册时 刚开始使用的是该代码 httpServletRequest.setAttribute("employee",emp.getId());导致我点击登录后&#xff0c;还是一直在登录页面&#x…

华为面试题及答案——机器学习(一)

(1). 线性回归普通最小二乘法运用的经典基本假设有哪些? 线性回归中,普通最小二乘法(Ordinary Least Squares, OLS)是一种常用的估计方法。 线性关系假设: 假设自变量(X)与因变量(Y)之间存在线性关系。即,模型可以表示为 Y=β0+β1X1+β2X2+...+βnXn+ϵY = \beta_0…

矩阵补全IGMC 学习笔记

目录 Inductive Graph-based Matrix Completion (IGMC) 模型 igmc推理示例&#xff1a; Inductive Graph-based Matrix Completion (IGMC) 模型 原版代码&#xff1a; IGMC/models.py at master muhanzhang/IGMC GitHub GNN推理示例 torch_geometric版本&#xff1a;tor…

mysql查询不同用户(操作记录)的最新一条记录

先用MAX(time) 和 group by item_id 查询出不同的item_id对应的最大时间&#xff0c;然后再在外面连表查询&#xff0c;查询 表中 item_id 和login_time 时间 相等于刚才的查询记录的记录 具体语句如下 select a.* from reyo a join (select item_id,max(login_time) as ti…

1970-2022年中国碳排放1KM栅格数据

【数据简介】 数据名称&#xff1a;1970-2022年中国碳排放栅格数据&#xff08;1KM) 区域范围&#xff1a;全国 数据格式&#xff1a;tif文件 数据大小:800M 数据来源&#xff1a;欧盟委员会全球大气排放数据库&#xff08;EDGAR) 部分数据预览&#xff1a; 原文链接http…

InfoMasker :新型反窃听系统,保护语音隐私

随着智能手机、智能音箱等设备的普及&#xff0c;人们越来越担心自己的谈话内容被窃听。由于这些设备通常是黑盒的&#xff0c;攻击者可能利用、篡改或配置这些设备进行窃听。借助自动语音识别 (ASR) 系统&#xff0c;攻击者可以从窃听的录音中提取受害者的个人信息&#xff0c…

大数据平台之Spark

Apache Spark 是一个开源的分布式计算系统&#xff0c;主要用于大规模数据处理和分析。它由UC Berkeley AMPLab开发&#xff0c;并由Apache Software Foundation维护。Spark旨在提供比Hadoop MapReduce更快的处理速度和更丰富的功能&#xff0c;特别是在处理迭代算法和交互式数…

技术师增强版,系统级别的工具!【不能用】

数据安全是每位计算机用户都关心的重要问题。在日常使用中&#xff0c;我们经常面临文件丢失、系统崩溃或病毒感染等风险。为了解决这些问题&#xff0c;我们需要可靠且高效的数据备份与恢复工具。本文将介绍一款优秀的备份软件&#xff1a;傲梅轻松备份技术师增强版&#xff0…

C语言之字符串处理函数

文章目录 1 字符串处理函数1.1 输入输出1.1.1 输出函数puts1.1.2 输入函数gets 1.2 连接函数1.2.1 stract1.2.2 strncat 1.3 复制1.3.1 复制strcpy1.3.2 复制strncpy1.3.3 复制memcpy1.3.4 指定复制memmove1.3.5 指定复制memset1.3.6 新建复制strdup1.3.7 字符串设定strset 1.4…

Vue 插槽:实现组件内容分发的强大工具

1. 什么是插槽 插槽是 Vue 组件中的一个概念&#xff0c;它允许我们向组件内部传递内容。这在使用组件时提供了极大的灵活性&#xff0c;因为我们可以根据需要自定义组件的内部结构&#xff0c;而不必改变组件本身。 2. 插槽的类型 2.1 默认插槽 默认插槽是 Vue 组件中最基…

RAG | (ACL24规划-检索增强)PlanRAG:一种用于生成大型语言模型作为决策者的规划检索增强生成方法

原文&#xff1a;PlanRAG: A Plan-then-Retrieval Augmented Generation for Generative Large Language Models as Decision Makers 地址&#xff1a;https://arxiv.org/abs/2406.12430 代码&#xff1a;https://github.com/myeon9h/PlanRAG 出版&#xff1a;ACL 24 机构: 韩国…

Python爬虫初试

在Python中&#xff0c;我们可以使用一些强大的库来编写一个功能强大的爬虫&#xff0c; Python 首先安装必要的库&#xff08;如果尚未安装&#xff09; pip install requests beautifulsoup4 import requests from bs4 import BeautifulSoup import osdef download_images(…

HTML(19)——Flex

Flex布局也叫弹性布局&#xff0c;是浏览器提倡的布局模型&#xff0c;非常适合结构化布局&#xff0c;提供了强大的空间分布和对齐能力。 Flex模型不会产生浮动布局中脱标现象&#xff0c;布局网页更简单、更灵活。 Flex-组成 设置方式&#xff1a;给父元素设置display:fle…

字节跳动最终面,面试官抛出一个“Flutter”我居然懵了

由于在业务开发过程中&#xff0c;开发者大部分的时间都专研于一种编程语言&#xff0c;如果想要掌握多端开发能力&#xff0c;则又稍显力不从心&#xff0c;因此大前端的概念应运而生。 大前端概念对于编程开发者来说早已耳熟能详&#xff0c;从我的角度来理解这个概念的话&a…

国企:2024年6月中国移动相关招聘信息 二

在线营销服务中心-中国移动通信有限公司在线营销服务中心 硬件工程师 工作地点:河南省-郑州市 发布时间 :2024-06-18 截至时间: 2024-06-30 学历要求:本科及以上 招聘人数:1人 工作经验:3年 岗位描述 1.负责公司拾音器等音视频智能硬件产品全过程管理,包括但…