vue-router4 (二) 引入并配置路由

news/2024/4/19 17:12:30/

1.在项目src/router/index.ts  文件夹下配置路由:

import { createRouter ,createWebHistory,RouteRecordRaw} from "vue-router";
//1.引入路由//3.routes配置项
const routes:Array<RouteRecordRaw> = [{path:"/",   //路径name:"login",    //路由名称component:()=>import("../components/login.vue")   //组件名,此处懒加载方式},{path:"/reg",name:"reg",component:()=>import("../components/reg.vue")},
]//2.创建路由,写入路由配置项
const router = createRouter({history:createWebHistory(),   //路由模式routes   //路由配置项})//4.导出路由
export default router;

 2.在main.ts入口文件中使用路由:

import router from './router/index'
//引入路由//使用路由:用use方法串联createApp之后
createApp(App).use(router).mount('#app')

 3.最后在app.vue中写入标签即可(router-view作用:显示与 url 对应的组件):

<template><div><h1>hello</h1></div><!--router-link进行导航,默认将router-link当成a标签进行渲染--><router-link to="/" style="margin-right: 20px;" tag="div">Login</router-link><router-link to="/reg" tag="div">Reg</router-link><!-- router-view作用:根据网页url不同,展示不同内容给用户 --><router-view></router-view>
</template>

完成以上3步骤后,在页面中输入对应的path路径就会显示对应的组件


http://www.ppmy.cn/news/1365096.html

相关文章

【GameFramework框架内置模块】4、内置模块之调试器(Debugger)

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群&#xff1a;398291828 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【GameFramework框架】系列教程目录&#xff1a;…

Groovy(第八节) Groovy 之类

目录 Song 类 Groovy 类就是 Java 类 类的关系 类初始化 核心的灵活性

如何使用Fastapi上传文件?先从请求体数据讲起

文章目录 1、请求体数据2、form表单数据3、小文件上传1.单文件上传2.多文件上传 4、大文件上传1.单文件上传2.多文件上传 1、请求体数据 前面我们讲到&#xff0c;get请求中&#xff0c;我们将请求数据放在url中&#xff0c;其实是非常不安全的&#xff0c;我们更愿意将请求数…

【MySQL】MySQL复合查询--多表查询自连接子查询 - 副本

文章目录 1.基本查询回顾2.多表查询3.自连接4.子查询 4.1单行子查询4.2多行子查询4.3多列子查询4.4在from子句中使用子查询4.5合并查询 4.5.1 union4.5.2 union all 1.基本查询回顾 表的内容如下&#xff1a; mysql> select * from emp; ----------------------------…

MySQL:单表查询SQL语句

提醒&#xff1a;设定下面的语句是在数据库名为 db_student里执行的。 创建t_student表 CREATE TABLE t_student(id INT NOT NULL AUTO_INCREMENT,stuName VARCHAR(30) DEFAULT NULL,age INT,sex VARCHAR(4) DEFAULT NULL,gradeName VARCHAR(30) DEFAULT NULL,PRIMARY KEY(id)…

修改Qt生成iOS应用的原生底层,编译QtBase下的ios子模块

1.下载Qt源码 2.找到ios.pro子工程 3.使用QtCreaor12打开ios.pro工程 4.出现工程下只有一个.pro文件解决 复制修改好的toolchain.prf文件进行替换. 修改方法:

HTML知识点

HTML 【一】HTML简介 【1】什么是HTML HTML是一种用于创建网页结构和内容的超文本标记语言&#xff0c;它是构建网页的基础。为了让浏览器正确渲染页面&#xff0c;我们必须遵循HTML的语法规则。浏览器在解析网页时会将HTML代码转换为可视化的页面&#xff0c;所以我们在浏览…

Netty入门指南:从零开始的异步网络通信

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Netty入门指南&#xff1a;从零开始的异步网络通信 前言Netty简介由来&#xff1a;发展历程&#xff1a;异步、事件驱动的编程模型&#xff1a; 核心组件解析通信协议高性能特性异步编程范式性能优化与…

鸿蒙应用程序包安装和卸载流程

开发者 开发者可以通过调试命令进行应用的安装和卸载&#xff0c;可参考多HAP的调试流程。 图1 应用程序包安装和卸载流程&#xff08;开发者&#xff09; 多HAP的开发调试与发布部署流程 多HAP的开发调试与发布部署流程如下图所示。 图1 多HAP的开发调试与发布部署流程 …

leetcode 3.反转链表;

1.题目&#xff1a; 给你单链表的头节点 head &#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 2.用例&#xff1a; 3.题目解析&#xff1a; &#xff08;1&#xff09;函数头&#xff1a; 要求返回结点&#xff0c;就 ListNode* reverseList(ListNode* head)&…

代码随想录算法训练营day60 || 647.回文子串,516. 最长回文子序列

动态规划&#xff0c;字符串性质决定了DP数组的定义 | LeetCode&#xff1a;647.回文子串_哔哩哔哩_bilibili 动态规划再显神通&#xff0c;LeetCode&#xff1a;516.最长回文子序列_哔哩哔哩_bilibili 647.回文子串 // 时间复杂度O(n^2) // 空间复杂度O(n^2) class Solution …

R语言空间分析、模拟预测与可视化

随着地理信息系统&#xff08;GIS&#xff09;和大尺度研究的发展&#xff0c;空间数据的管理、统计与制图变得越来越重要。R语言在数据分析、挖掘和可视化中发挥着重要的作用&#xff0c;其中在空间分析方面扮演着重要角色&#xff0c;与空间相关的包的数量也达到130多个。在本…

Redis的发布订阅功能教程,实现实时消息和key过期事件通知功能

Redis的发布订阅 Redis的发布/订阅(Pub/Sub)功能是一种消息传递模式,用于实现消息发布者(publisher)和订阅者(subscriber)之间的消息通信。在这种模式下,消息的发送者(发布者)将消息发送到特定的频道(channel),而订阅了该频道的接收者(订阅者)将会接收到这些消息…

gprMax3.0随机介质建模

此处利用gprMax建立随机介质模型,采用matlab生成随机数组,保存为HDF5文件,此处为全代码,无需修改即可运行。在gprMax输入文件中使用#geometry_objects_read:读入自定义的随机模型 此文参考其他博主的自定义几何形状模块gprMax3.0建模时如何自定义目标的几何形状_#geomet…

Baby_enc-攻防世界-MISC

题目描述&#xff1a; 下载得到enc.py和out.txt&#xff0c;分别是加密算法和结果。先看enc.py&#xff1a; import codecs def enc(s, t):if t:l list(map(ord, s))return enc(.join(list(map(chr, [l[i]^l[i1] for i in range(len(l)-1)]))), t-1)else:return swith open(i…

trie树(前缀树)

前缀树 1. 前缀树的的介绍2.前缀树的实现2.1插入功能2.2删除功能2.3查找前缀和查找单词功能2.4 哈希表版本 1. 前缀树的的介绍 在计算机科学中&#xff0c;trie&#xff0c;又称前缀树或字典树&#xff0c;是一种有序树&#xff0c;用于保存关联数组&#xff0c;其中的键通常是…

Stable Diffusion 模型分享:【Checkpoint】YesMix(动漫、2.5D)

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四下载地址模型介绍 条目内容类型大模型基础模型SD 1.5来源

C语言第三十二弹---自定义类型:联合和枚举

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 目录 1、联合体 1.1、联合体类型的声明 1.2、联合体的特点 1.3、相同成员的结构体和联合体对比 1.4、联合体大小的计算 1.5、联合的⼀个练习 2、枚举类型 …

关于CSS常见选择器应用的基础教程

在网页开发中&#xff0c;CSS选择器是非常重要的一部分&#xff0c;它们用来指定你想要样式化的HTML元素。熟练掌握各种选择器的用法可以帮助你更有效地实现网页布局和设计。本文将介绍一些常见的CSS选择器&#xff0c;并演示它们的基本用法及应用场景。 一、元素选择器&#…

Android 接入指纹识别

接入指纹框架&#xff1a;https://github.com/Tencent/soter implementation com.github.Tencent.soter:soter-wrapper:2.0.91.Application中初始化 class IApplication : Application() {override fun onCreate() {super.onCreate()instance thisinitSort()}private fun in…