Vue3 路由入门

news2024/12/28 3:41:36

先安装路由

npm i vue-router 

//创建路由器
import { createRouter, createWebHashHistory } from 'vue-router'

//1.导入组件
import Home from '@/components/Home.vue'
import News from '@/components/News.vue'

//2.配置路由映射规则
const routes = [
    {
        name: 'home',
        path: '/home',
        component: Home
    },
    {
        name: 'news',
        path: '/news',
        component: News
    }
]

//路由器管理路由
const router = createRouter({
    //路由器的工作模式
    history: createWebHashHistory(), 
    routes: routes
})


//并暴露路由器,供main.ts调用
export default router

路由传参与路由配置

 

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

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

相关文章

【STM32】F405/407的模块总览图,记录查看

从STM32F405/407数据手册中提取,方便以后查看。主要是什么外设连接在什么总线上,时钟频率是多少。 TIM2、3、4、5、12、13、14在APB1上,最大频率84M TIM1、8、9、10、11在APB2上,最大频率168M

吴恩达机器学习笔记:第 9 周-16推荐系统(Recommender Systems) 16.5-16.6

目录 第 9 周 16、 推荐系统(Recommender Systems)16.5 向量化:低秩矩阵分解16.6 推行工作上的细节:均值归一化 第 9 周 16、 推荐系统(Recommender Systems) 16.5 向量化:低秩矩阵分解 在上几节视频中,我们谈到了协同过滤算法&…

网络层协议之 IP 协议

IP 协议格式 4 位版本:此处的取值只有两个,4(IPv4)和 6(IPv6),即指定 IP 协议的版本。 4 位首部长度:描述了 IP 报头多长,IP 报头是变长的,因为报头中的选项部…

windows驱动开发-inf文件(一)

驱动总是和inf文件相关,在WinDDK的时候,许多inf文件都需要开发工程师手动编写,不过,现在已经可以使用inx文件来生成inf文件了,它经常用于驱动的安装和卸载;不过,并不是所有的驱动都需要使用inf文…

【 npm详解:从入门到精通】

文章目录 npm详解:从入门到精通1. [npm](https://www.npmjs.com/)的安装2. npm的基础用法2.1 初始化项目2.2 安装依赖2.3 卸载依赖2.4 更新依赖 3. npm的高级用法3.1 运行脚本3.2 使用npm scope3.3 使用npm link 4. npm资源5. 使用npm进行依赖树分析和可视化6. npm进…

数据分析从入门到精通 1.numpy剑客修炼

会在某一瞬间突然明白,有些牢笼是自己给自己的 —— 24.5.5 一、数据分析秘笈介绍 1.什么是数据分析 是把隐藏在一些看似杂乱无章的数据背后的信息提炼出来,总结出所研究对象的内在规律。使得数据的价值最大化 案例: 分析用户的消…

Redis 主从复制 初步认识

文章目录 定义拓扑拓扑定义单从拓扑多从拓扑树型拓扑 使用原理建立流程持续复制 定义 Redis主从复制技术的主要满足的需求是①数据恢复②负载均衡 ①数据恢复的理解:将数据同步到多个Redis服务器中,其中一个节点数据损毁,可通过复制其他节点…

Python | Leetcode Python题解之第77题组合

题目: 题解: class Solution:def combine(self, n: int, k: int) -> List[List[int]]:ans []path []def dfs(x):remain k - len(path)if not remain:ans.append(list(path))returnif n 1 - x > remain:dfs(x 1)path.append(x)dfs(x 1)path.…

【进程间通信】共享内存

文章目录 共享内存常用的接口指令利用命名管道实现同步机制总结 System V的IPC资源的生命周期都是随内核的。 共享内存 共享内存也是为了进程间进行通信的,因为进程间具有独立性,通信的本质是两个不同的进程看到同一份公共资源,所以共享内存…

MVC 过滤器

MVC 过滤器常用有4种 Action过滤器(IActionFilter) 》 行为过滤器Result过滤器 (IResultFilter)》 视图过滤器 或 结果过滤器Exception过滤器(IExceptionFilter)》 异常过滤器Authorization过滤器&#xf…

OpenCV|简单绘制一个矩形

OpenCV中的rectangle() 为绘制矩形命令,形式如下: # (img: cv2.typing.MatLike, pt1: cv2.typing.Point, pt2: cv2.typing.Point, color: cv2.typing.Scalar, thickness: int ..., lineType: int ..., shift: int ...)cv2.rectangle(img, pt1, pt2, …

运用分支结构与循环结构写一个猜拳小游戏

下面我们运用平常所学的知识来写一个小游戏,这样能够加强我们学习的趣味性,并且能够更加的巩固我们所学的知识。 游戏代码: 直接放代码:(手势可以使用数字来代替,比如0对应石头,1对应剪刀&…

APB总线协议

一、概述 高级外围设备总线(APB)是高级微控制器总线架构(AMBA)总线层次结构的一部分,并为最小的功耗和降低接口复杂性进行了优化。AMBA APB应用于连接到任何低带宽且不需要流水线总线接口的高性能的外设。 二、APB总…

【氮化镓】GaN功率器件在转换器设计中的挑战

I. 引言(INTRODUCTION) 宽带隙(WBG)器件的重要性: 引言部分首先强调了宽带隙(WBG)器件在高频、高效率电力电子技术中的关键作用。这些器件,包括碳化硅(SiC)和氮化镓(GaN),相较于传统的硅功率器件,具有显著的优势。宽带隙半导体材料的高击穿场强允许设计更薄的漂…

linux Shell编程之条件语句

条件测试操作 test命令 条件测试操作 Shell环境根据命令执行后的返回状态值($?)来判断是否执行成功,当返回值为0(真true)时表示成功,返回值为非0值(假false)时表示失败或异常。 t…

nginx--系统参数优化telenct

系统参数 在生产环境中,根据自己的需求在/etc/sysctl.conf来更改内核参数 net.ipv4.ip_nonlocal_bind 1 允许非本地IP地址socket监听 net.ipv4.ip_forward 1 开启IPv4转发 net.ipv4.tcp_timestamps 0 是否开启数据包时间戳 net.ipv4.tcp_tw_reuse 0 端⼝口复⽤…

安防视频/视频汇聚系统EasyCVR视频融合云平台助力智能化酒店安防体系的搭建

一、背景需求 2024年“五一”假期,全国文化和旅游市场总体平稳有序。文化和旅游部6日发布数据显示,据文化和旅游部数据中心测算,全国国内旅游出游合计2.95亿人次。“五一”假期县域市场酒店预订订单同比增长68%,而酒店作为一个高…

华为数据之道第三部分导读

目录 导读 第三部分 第7章 打造“数字孪生”的数据全量感知能力 “全量、无接触”的数据感知能力框架 数据感知能力的需求起源:数字孪生 数据感知能力架构 基于物理世界的“硬感知”能力 “硬感知”能力的分类 “硬感知”能力在华为的实践 基于数字世界的…

Apache SeaTunnel 4月回顾:明星贡献者与技术突破

各位热爱 SeaTunnel 的小伙伴们,SeaTunnel 社区 4 月份月报来啦!这里将记录 SeaTunnel 社区每月的重要更新,欢迎关注! 月度 Merge 之星 感谢以下小伙伴 4 月为 Apache SeaTunnel 做的精彩贡献(排名不分先后&#xff…

快速话术本(常用文本快速复制工具)EXE成品+软件源码

功能介绍 经常性需要重复性的输入几个不同的文本,来回复制很麻烦,这个小工具可以帮你解决,把要经常输入的文本添加进去,点击即可复制~ 链接:https://pan.baidu.com/s/14-U_9uzkvpCrpzBkQaDZeA?pwdu7ot 提取码&#…