【Vue3】什么是路由？Vue中的路由基本切换~

💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！
请添加图片描述

文章目录

  • 🍀什么是路由？
  • 🍀介绍Vue3中的路由
  • 🍀创建路由
  • 🍀总结

🍀什么是路由？

网络的角度：

网络中的路由：在网络中，路由是指确定数据包从源到目的地的路径的过程。路由器是负责执行这一过程的设备，它们根据网络中的路由表来选择最佳路径将数据包传输到目的地。网络中的路由是指网络数据包的传输路径选择

Vue3的角度：

在Vue.js中，路由是指管理应用程序中不同页面之间导航的方式。Vue Router是Vue.js官方提供的路由管理器，它允许您在单页应用程序（SPA）中定义路由，然后根据用户的操作在不同的页面之间进行切换。Vue中的路由是指前端应用程序中页面之间的导航管理

🍀介绍Vue3中的路由

在介绍本节的内容之前，我们首先还是老样子，准备好需要的代码，准备好必要的html代码，方便后面的操作，这里我们写了三个a标签，学过前端的都知道，我这是要创建链接，这就引出了路由和路径的关联

<template>

<div class="app">
    <!--导航区-->
    <h2 class="title">路由测试</h2>
    <div class="navigate">
      <ul>
        <li><a href="">首页</a></li>
        <li><a href="">娱乐</a></li>
        <li><a href="">帮助</a></li>
      </ul>     
    </div>
    <!--展示区-->
    <div class="main-contain">
      敬请期待
    </div>
  </div>
</template>
<script lang='ts' setup name="App">
  import person from './components/person.vue'
  
</script>


<style>
 /* App */
.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;
}
.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.xiaozhupeiqi {
 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>

接下来我们需要先安装一下路由器，打开你的终端

npm i vue-router

接下来我们就静静等着就好了
之后我们创建一个router文件夹在src下级，同时创建一个文件index.ts

🍀创建路由

上节我们已经安装好我们需要的vue-router，接下来我们就需要导入了

import {createRouter} from 'vue-router'

第二步，就是正式创建路由了，path是路径，component是模板

const router = createRouter({
  routes:[
    {
      path:'/home',
      component:Home
    },
    {
      path:'/plays',
      component:Play
    },
    {
      path:'/about',
      component:About
    },
  ]
})

但是我们还没有对应的模版，所以我们需要在模版文件夹创建三个.vue文件
在这里插入图片描述
之后就是要引入要呈现的组件

import Home from '@/components/Home.vue'
import Play from '@/components/Play.vue'
import About from '@/components/About.vue'

最后我们就需要将路由暴漏出去，以便在应用程序的其他地方可以引入并使用该实例

export default router

如果粘贴代码的小伙伴会发现，代码飘红，这是因为Vue3在创建路由的时候，要明确工作模式，所以我们需要引入一下

import {createRouter,createWebHistory} from 'vue-router'
const router = createRouter({
  history:createWebHistory(), 
  routes:[ 
    {
      path:'/home',
      component:Home
    },
    {
      path:'/plays',
      component:Play
    },
    {
      path:'/about',
      component:About
    },
  ]
})

最后我们需要在main.ts里面导入router并使用

import router from './router'
// 创建一个应用
const app = createApp(App)
// 使用路由器
app.use(router)
// 挂载整个应用到app容器中
app.mount('#app')

之后我们将Home、About、Play三个文件代码补全

<template>
  <div class="home">
    <img src="" alt="">
  </div>
</template>

<script setup lang="ts" name="Home">

</script>

<style scoped>
  .home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
</style>

<template>
  <div class="about">
    <h2>关于</h2>
  </div>
</template>

<script setup lang="ts" name="About">

</script>

<style scoped>
.about {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: rgb(85, 84, 84);
  font-size: 18px;
}
</style>

<template>
  <div class="plays">
    <ul>
      <li><a href="#">篮球</a></li>
      <li><a href="#">足球</a></li>
      <li><a href="#">羽毛球</a></li>
      <li><a href="#">乒乓球</a></li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="plays">
  
</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>

现在到这里我们其实点击还是没有任何反应，这是因为我们还没有在App.vue中呈现
我们需要在App.vue一个RouterView

import {RouterView} from 'vue-router'

 <div class="main-content">
      <RouterView></RouterView>
    </div>

这样我们就可以显示了
在这里插入图片描述
但是我们这样是需要在地址栏修改路径，如果点击首页而修改路径该怎么做，这时候就需要我们引入RouterLink

完整代码如下：

<template>

<div class="app">
    <!--导航区-->
    <h2 class="title">路由测试</h2>
    <div class="navigate">
        <RouterLink to="/home" active-class="MT">首页</RouterLink>
      <RouterLink to="/plays" active-class="MT">娱乐</RouterLink>
      <RouterLink to="/about" active-class="MT">关于</RouterLink>   
    </div>
    <!--展示区-->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>
<script lang='ts' setup name="App">
import {RouterView,RouterLink} from 'vue-router'
</script>


<style>
    /* App */
  .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;
  }
  .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.MT {
    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>

运行效果如下

请添加图片描述

🍀总结

本节简单介绍了一下路由的基本切换，下一节我们接着介绍~

请添加图片描述

挑战与创造都是很痛苦的，但是很充实。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

AI写真变现项目丨超级训练营SOP手册

AI写真变现项目丨超级训练营SOP手册

出品方&#xff1a; 吴东子团队 x AI破局俱乐部 以下只是该SOP手册的部分介绍&#xff0c;AI写真变现项目上手到变现全流程&#xff0c;需要完整手册的可以dd我。 AI写真 首先什么是AI写真&#xff0c;顾名思义的话可以说成是用AI生成写真照&#xff0c;我们先暂且这么理解&am…
阅读更多...
学习数据节构和算法的第15天

学习数据节构和算法的第15天

单链表的实现 链表的基本结构 #pragma once #include<stdio.h> typedf int SLTDataType; typedy struct SListNode {SLTDataType data;struct SListNode*next; }SLTNode;void Slisprint(SLTNode*phead);打印链表 #include<stdio.h> void SListPrint(SLTNode*phe…
阅读更多...
springboot+nacos使用

springboot+nacos使用

依赖 nacos服务发现和注册的依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId> </dependency><dependency><groupId>com.alibaba.cloud</g…
阅读更多...
【掌握版本控制：Git 入门与实践指南】操作仓库文件|分支管理

【掌握版本控制：Git 入门与实践指南】操作仓库文件|分支管理

&#x1f3ac;慕斯主页&#xff1a;修仙—别有洞天 ♈️今日夜电波&#xff1a;泥中に咲く—ウォルピスカーター 0:34━━━━━━️&#x1f49f;──────── 4:46 &#x1f504; ◀️ ⏸ ▶…
阅读更多...
基于Springboot的高校汉服租赁网站（有报告）。Javaee项目，springboot项目。

基于Springboot的高校汉服租赁网站（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的高校汉服租赁网站&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…
阅读更多...
【清晰易懂】@Mapper注解和BaseMapper爱恨情仇

【清晰易懂】@Mapper注解和BaseMapper爱恨情仇

此问题的提出在于自己没有弄明白一个问题&#xff0c;就是Mapper注解有时候可以不加&#xff0c;有时候又需要加。 先说结论&#xff1a;Mapper注解和BaseMapper类在项目中起着相同的作用&#xff0c;都是为了实现数据库基本简单的CRUD&#xff0c;省去在xml文件中再去写&#…
阅读更多...
(一）运行起自己的chatGPT

(一）运行起自己的chatGPT

一、运行步骤 前面所有步骤可以参见https://datawhaler.feishu.cn/docx/BwjzdQPJRonFh8xeiSOcRUI3n8b 二、注意 需要注意的是&#xff1a; 部署起来后&#xff0c;必须使用域名访问才能进入。用ip地址端口访问不成功 三、运行效果 gradio需要额外配置一个外部端口&#x…
阅读更多...
Redis + Caffeine = 王炸！！

Redis + Caffeine = 王炸！！

在高性能的服务架构设计中，缓存是一个不可或缺的环节。在实际的项目中，我们通常会将一些热点数据存储到Redis或MemCache这类缓存中间件中，只有当缓存的访问没有命中时再查询数据库。在提升访问速度的同时，也能降低数据库的压力。 随着不断的发展，这一架构也产生了改进，在…
阅读更多...
移动硬盘无法读取怎么修复？分享三个简单方法

移动硬盘无法读取怎么修复？分享三个简单方法

移动硬盘作为现代数据存储的重要工具&#xff0c;一旦出现故障&#xff0c;往往会让我们感到焦虑和困惑。当移动硬盘无法读取时&#xff0c;我们需要冷静分析并采取适当的措施来修复它。本文将为您介绍三种有效的修复方法。 一、检查物理连接与驱动程序 当移动硬盘无法读取时&…
阅读更多...
整数和浮点数在内存中储存的形式

整数和浮点数在内存中储存的形式

整数 整数的二进制表示法有三种&#xff0c;即原码、反码、补码。 三种表示方式均有符号位和数值位 符号位位于数值位最高位的那一位&#xff0c;分别用0和1表示&#xff0c;0表示正数&#xff0c;1表示负数。 数值位&#xff0c;除最高位的那一位外其他都是数值位。 正整数…
阅读更多...
GaussDB(DWS)运维利刃：TopSQL工具解析

GaussDB(DWS)运维利刃：TopSQL工具解析

在生产环境中&#xff0c;难免会面临查询语句出现异常中断、阻塞时间长等突发问题&#xff0c;如果没能及时记录信息&#xff0c;事后就需要投入更多的人力及时间成本进行问题的定位和解决&#xff0c;有时还无法定位到错误出现的地方。在本期《GaussDB(DWS)运维利刃&#xff1…
阅读更多...
Onlyfans年龄验证/无法支付解决方案

Onlyfans年龄验证/无法支付解决方案

很多小伙伴在使用的时候遇到年龄验证&#xff0c;或者需要绑定visa卡&#xff0c;这里需要注意的是提示绑定visa卡直接绑定就好了&#xff0c;记得开好你的环境&#xff0c;要不然也会出现身份验证&#xff0c;对于我们来说验证一般是不过的 1、准备好环境 2、准备好卡&#…
阅读更多...
如何使用US Domain Center和WordPress搭建非营利组织网站的详细指南

如何使用US Domain Center和WordPress搭建非营利组织网站的详细指南

在今天的数字化时代&#xff0c;拥有一个专业、易于管理和更新的网站对于非营利组织&#xff08;例如慈善机构、NGO等&#xff09;至关重要。WordPress是一个功能强大且易于使用的网站构建平台&#xff0c;而美国域名中心 US Domain Center&#xff1a;US Domain Center 则是一…
阅读更多...
iOS应用内的沙盒目录

iOS应用内的沙盒目录

iOS系统的沙盒机制规定每个应用都只能访问当前沙盒目录下面的文件&#xff0c;在开发中常常需要数据存储的功能&#xff0c;比如存取文件&#xff0c;归档解档等&#xff0c;因此有必要熟悉沙盒目录及其作用。 Documents目录 开发者可以将应用程序的数据文件保存在这个目录下.…
阅读更多...
9.15完全平方数

9.15完全平方数

j 算法&#xff1a; 完全平方数就是物品&#xff08;可以无限件使用&#xff09;&#xff0c;凑个正整数n就是背包&#xff0c;问凑满这个背包最少有多少物品&#xff1f; 动规五部曲&#xff1a; 1.确定dp及其下标 dp[j]&#xff1a;凑成j的最少完全平方数的个数为dp[j] …
阅读更多...
基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的暴力行为检测系统（深度学习模型+UI界面+Python代码+训练数据集）

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的暴力行为检测系统（深度学习模型+UI界面+Python代码+训练数据集）

摘要&#xff1a;本篇博客深入介绍了如何利用深度学习技术构建暴力行为检测系统&#xff0c;并提供了完整的实现代码。本系统基于性能卓越的YOLOv8算法&#xff0c;并与YOLOv7、YOLOv6、YOLOv5等前代算法进行了详细的性能比较&#xff0c;关注了如mAP、F1 Score等关键性能指标。…
阅读更多...
数据结构 第2章：线性表

数据结构 第2章：线性表

文章目录 2.1 线性表的定义和操作2.1.1 线性表的基本概念2.1.2 线性表的基本操作 2.2. 顺序表2.2.1. 顺序表的基本概念2.2.2. 顺序表的实现2.2.3. 顺序表的基本操作 2.3 链表2.3.1 单链表的基本概念2.3.2 单链表的实现2.3.3 单链表的插入2.3.4. 单链表的删除2.3.5. 单链表的查找…
阅读更多...
爬虫入门到精通_框架篇13(PySpider框架基本使用及抓取TripAdvisor实战)_PySpider下载安装，项目实战

爬虫入门到精通_框架篇13(PySpider框架基本使用及抓取TripAdvisor实战)_PySpider下载安装，项目实战

1 PySpider框架基本用法 PySpider框架&#xff1a; 去重处理PyQuery提取错误重试多进程处理代理简洁JavaScript渲染结果监控WebUI管理 安装PySpider: pip install pyspider报错&#xff1a; 主要是async是python3.7的保留字&#xff0c;pyspider库中的有些文件与之重复而出…
阅读更多...
Stable Diffusion 模型下载：Comic Babes（漫画宝贝）

Stable Diffusion 模型下载：Comic Babes（漫画宝贝）

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八 下载地址 模型介绍 条目内容类型大模型基础模型SD 1.5来源CIVITAI作者datmuttdoe文件名称comicBabes_v2.safet…
阅读更多...
教你用两种方式遍历循环python中的字典

教你用两种方式遍历循环python中的字典

开发中经常会用到对于字典、列表等数据的循环遍历&#xff0c;但是python中对于字典的遍历对于很多初学者来讲非常陌生&#xff0c;今天就来讲一下python中字典的循环遍历的两种方式。 注意&#xff1a; python2和python3中&#xff0c;下面两种方法都是通用的。 1. 只对键的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站