Vue项目中使用router

Vite项目中使用router的步骤:

1.安装路由器库:

 npm install vue-router@4

2.创建路由配置:通常命名为 router.js 或者 router/index.js

 import { createRouter, createWebHashHistory } from 'vue-router';import Login from '../views/Login.vue';import Index from '../views/Index.vue';​const routes = [{path:'/',component: Login},{path:'/index', component: Index,children: [{path: '',alias: '/list',component: () => import('../components/User.vue')},{path: '/upload',component: () => import('../components/Avatar.vue')}]}   ]​// 创建路由实例const router = createRouter({routes,history: createWebHashHistory()});​// 导出路由实例export default router;

3.在应用中使用路由:通常是 main.js中使用创建的路由实例

 import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import elementIcon from "./plugins/icons";import { createPinia } from 'pinia'import axios from "axios"// import './style.css'import router from './router'import App from './App.vue'​const pinia = createPinia()const app = createApp(App);​app.use(ElementPlus);app.use(router);app.use(pinia);app.use(elementIcon);app.config.globalProperties.$axios = axios​app.mount('#app')

4.在组件中使用路由:在模板中使用 <router-link> 来生成链接

 <template><!-- 默认显示的是路由中的 / --><router-view></router-view></template>

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

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

相关文章

Jpg与png图片区别

Jpg与png图片有什么区别&#xff1f; JPG&#xff08;或JPEG&#xff09;和PNG是两种广泛使用的图像文件格式&#xff0c;它们在压缩技术、文件大小、图像质量、透明度支持等方面有显著的不同&#xff1a; 压缩技术: JPG: 使用有损压缩技术。这意味着在压缩过程中&#xff0c;一…

43-3 应急响应 - WebShell查杀工具

一、WebShell 简介 WebShell是一种以asp、php、jsp等网页文件形式存在的代码执行环境,通常用于网站管理、服务器管理和权限管理等操作。然而,如果被入侵者利用,它也可以用于控制网站服务器。具有完整功能的WebShell通常被称为"大马",而功能简单的则称为"小马…

20240529训练题目(西安交通大学 2024年程序设计竞赛校赛)

题目 D题 欢迎来到瑟莉姆大人的享乐宴会&#xff01; 宴会中一共有n个访客&#xff0c;编号1∼n。为了更好地控制影的力量&#xff0c;瑟莉姆要求有n−1个访客都恰好受 到另一个访客的支配&#xff0c;而剩下的那个人成为总支配者&#xff0c;支配其他n−1名访客。访客间的直…

监控易军队信息化运维:支持网闸隔离技术,实现多安全域的统一监控

随着信息技术的迅猛发展&#xff0c;军队的信息化建设也在不断推进&#xff0c;信息化运维成为了保障军队正常运作的关键环节。然而&#xff0c;军队的信息化运维现状仍面临诸多挑战&#xff0c;如设备种类多、数据处理量大、专业技术要求高以及信息安全隐患等。针对这些问题&a…

海外仓能用什么系统?一篇文章给你讲明白

海外仓作为跨境电商物流的重要组成部分&#xff0c;越来越受到国内企业的关注。对于中小型海外仓来说&#xff0c;怎么选择一个合适的海外仓系统&#xff0c;成为了一个亟待解决的问题。 今天我们就用一篇文章给大家讲清楚&#xff0c;怎么根据自己海外仓的特点&#xff0c;选…

MySQL sum后再计算percentage的多种解决办法

over() 函数&#xff0c;最简单的一种 以下是SQL片段&#xff0c;在外面嵌套一个Select是因为over 不会SQL语句所有的data sum&#xff0c;而不是 limit 之后的数据&#xff0c;所以需要先limit 在over&#xff08;&#xff09; SELECT b.*,ROUND(b.amount*100 / SUM(b.amount…

将IP添加到基础设计

将IP添加到基础设计 本节介绍将AXI IP添加到设计中。 添加低速外设&#xff08;AXI4 Lite&#xff09; 1.将等效IP添加到框图中。例如&#xff0c;对于AXI GPIO&#xff1a; a.右键单击方框图中的任意位置&#xff0c;然后选择“添加IP”。 b.搜索并双击AXI GPIO以添加IP。 2.双…

如何自己搭建一个简单的web api 环境 主流语言C# 编译器推荐VS2022

标题如何自己搭建一个简单的web api 环境 主流语言C# 编译器推荐VS2022 搭建一个简单的Web API环境&#xff0c;可以使用C#和Visual Studio 2022来实现。这里我们将使用ASP.NET Core来创建一个基本的Web API项目。以下是详细步骤&#xff1a; 安装必要的软件 Visual Studio 2…

[数据集]EEG数据集汇总

目录 1. EEG简介 2. 可用数据集 2.1. A large and rich EEG dataset for modeling human visual object recognition 2.2. A multi-modal open dataset for mental-disorder analysis 2.3. An EEG motor imagery dataset for brain computer interface in acute stroke pa…

双指针+前缀和,蓝桥云课 近似gcd

一、题目 1、题目描述 2、输入输出 2.1输入 2.2输出 3、原题链接 0近似gcd - 蓝桥云课 (lanqiao.cn) 二、解题报告 1、思路分析 考虑近似gcd的子数组的特点&#xff1a;不为g的倍数的数字个数小于等于1 我们用前缀和pre[]来存储不为g的倍数的数字个数 那么枚举左端点l&a…

数据结构(八)二叉树、哈希查找

文章目录 一、树&#xff08;一&#xff09;概念1. 前序遍历&#xff1a;根左右2. 中序遍历&#xff1a;左根右3. 后序遍历&#xff1a;左右根4. 层序遍历&#xff1a;需要借助队列实现 &#xff08;二&#xff09;代码实现&#xff1a;二叉树1. 结构体定义2. 创建二叉树1. 注意…

pytest识别测试用例的机制以及和unittest的区别

pytest识别测试用例的机制 文件 以test_开头或以_test结尾的python文件&#xff0c;即test_.py或_test.py类&#xff0c;在第一点识别到的文件中的类&#xff0c;且满足一下任一条件&#xff1a; 1&#xff09;以Test_开头&#xff0c;且没有__init__()初始化函数的类&#xf…

LED显示屏模组七大参数

LED模组是LED显示屏的核心组件&#xff0c;它包含LED线路板和外壳&#xff0c;将LED灯珠按照特定规则排列并封装&#xff0c;通常还会进行防水处理。随着LED显示屏行业的发展及其广泛应用&#xff0c;LED模组的功能和作用变得愈加重要。那么&#xff0c;LED模组的七大参数是什么…

黑马es数据同步mq解决方案

方式一:同步调用 优点:实现简单&#xff0c;粗暴 缺点:业务耦合度高 方式二:异步通知 优点:低耦含&#xff0c;实现难度一般 缺点:依赖mq的可靠性 方式三:监听binlog 优点:完全解除服务间耦合 缺点:开启binlog增加数据库负担、实现复杂度高 利用MQ实现mysql与elastics…

深度学习创新点不大但有效果,可以发论文吗?

深度学习中创新点比较小&#xff0c;但有效果&#xff0c;可以发论文吗&#xff1f;当然可以发&#xff0c;但如果想让编辑和审稿人眼前一亮&#xff0c;投中更高区位的论文&#xff0c;写作永远都是重要的。 那么怎样“讲故事”才能让论文更有吸引力&#xff1f;我总结了三点…

【Python】解决Python报错:TypeError: ‘int‘ object is not iterable

&#x1f9d1; 博主简介&#xff1a;阿里巴巴嵌入式技术专家&#xff0c;深耕嵌入式人工智能领域&#xff0c;具备多年的嵌入式硬件产品研发管理经验。 &#x1f4d2; 博客介绍&#xff1a;分享嵌入式开发领域的相关知识、经验、思考和感悟&#xff0c;欢迎关注。提供嵌入式方向…

PESocket客户端链接服务器出现The requested operation caused a stack overflow.

注意服务器启动、设置日志的顺序&#xff1a;服务先启动、设置日志后启动 bug描述&#xff1a;先设置服务器的日志&#xff0c;在启动服务器&#xff0c;具体代码如下&#xff0c;启动后出现The requested operation caused a stack overflow. //客户端服务器设置日志client.S…

操作系统真象还原:编写MBR主引导记录,让我们开始掌权

第2章-编写MBR主引导记录&#xff0c;让我们开始掌权 这是一个网站有所有小节的代码实现&#xff0c;同时也包含了Bochs等文件 在开机的一瞬间&#xff0c;也就是接电的一瞬间&#xff0c; CPU 的 CS: ip 寄存器被强制初始化为 0XF000: 0XFFF0。由于开机的时候处于实模式&…

JS函数高级技巧之纯函数、高级函数、懒函数和函数组合

纯函数 首先&#xff0c;纯函数要满足两个条件&#xff1a; 给相同的参数返回相同的结果&#xff1b;不产生任何副作用 function double(num){return num * 2 }只要给num的值不变&#xff0c;它返回的结果也不会变&#xff0c;而且这个函数执行的过程中没有对外界造成影响&…

一款开箱即用的Markdown 编辑器!【送源码】

开源的 Markdown 编辑器 Cherry Markdown Editor 是一款前端-markdown-编辑器-组件&#xff0c;具有开箱即用、轻量简洁、易于扩展等特点&#xff0c;它可以运行在浏览器或服务端 (NodeJs). 当 Cherry Markdown 编辑器支持的语法不满足开发者需求时&#xff0c;可以快速的进行…