Vue3中VueRouter基本用法及与Vue2中路由使用差异解析
Vue Router 在 Vue3 中被重写,使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同,需要注意。
首先,让我们来看一下 Vue3 中 VueRouter 的基本使用方法:
- 安装 Vue Router:
npm install vue-router@next
- 创建一个 router.js 文件,并设置你的路由:
import { createRouter, createWebHistory } from 'vue-router'
import HomeComponent from './components/HomeComponent.vue'
import AboutComponent from './components/AboutComponent.vue'export const router = createRouter({history: createWebHistory(), //注意这里,方式不同routes: [{ path: '/', component: HomeComponent },{ path: '/about', component: AboutComponent },],
})
- 在你的 main.js 文件中安装路由:
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router.js'//这里,用的是use
createApp(App).use(router).mount('#app')
- 现在,你可以在你的组件中使用
<router-link>
和<router-view>
:
<template><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><router-view/>
</template>
接下来,让我们看一下 Vue3 和 Vue2 在使用VueRouter 时的主要差异:
-
Vue Router 在 Vue3 中被重写,使用了 Vue3 的 Composition API。这意味着你可以在任何组件中使用
useRouter
和useRoute
来分别获取 router 实例和当前路由。 -
Vue3 支持异步组件,这意味着你可以在路由配置中直接使用动态
import()
语法来导入组件,无需使用Vue.component
。 -
Vue3 中的
<router-link>
不再支持tag
属性,而是引入了新的v-slot
API 来自定义链接的渲染方式。 -
Vue3 中的 Vue Router 对 Vue2 的 API 进行了一些更改,例如,
mode: 'history'
被更改为history: createWebHistory()
,base
属性被移动到了createWebHistory
函数中。
更多细节如动态路由、编程式导航、路由守卫等原理相同,写法略不同,参考:https://router.vuejs.org/zh/introduction.html
相关文章:
Vue3中VueRouter基本用法及与Vue2中路由使用差异解析
Vue Router 在 Vue3 中被重写,使用了 Vue3 的 Composition API。使用上跟Vue2 相比有些不同,需要注意。 首先,让我们来看一下 Vue3 中 VueRouter 的基本使用方法: 安装 Vue Router: npm install vue-routernext创建…...
10.Docker Compose容器编排
文章目录 Compose简介安装和卸载步骤核心概念compose文件两要素 使用步骤Compose常用命令微服务测试本地编码打包编写Dockerfile文件构建镜像 不使用Compose调试使用Compose调试WordPress测试验证增量更新 Compose简介 docker建议我们每一个容器中只运行一个服务,因为docke…...
【算法——动态规划(从dfs回溯开始推导dp)】
基础理论 递归: 递:大问题分解子问题的过程 ; 归:产生答案 dp:只进行归;用已知的最底层的(递归的边界,搜索树的底),推出未知 《视频索引》 一句话&…...
不是所有洗碗机都能空气除菌 友嘉灵晶空气除菌洗碗机评测
精致的三餐让你以为生活是“享受”,可饭后那些油腻的锅碗瓢盆却成了你我美好生活的最大障碍。想要只吃美食不洗碗,那一台优秀的洗碗机就必不可少了!今天,ZOL中关村在线要评测的就是这样一台不光洗得干净更能有效除菌抑菌的洗碗机—…...
【Linux】如何创建yum 组(yum groups)
如何创建yum 组(yum groups) 在 yum 中创建组信息需要手动编辑并创建一个组文件,然后使用 createrepo 工具生成组信息。以下是一个详细的步骤指南: 1. 创建组信息文件 首先,创建一个 XML 文件来定义组信息。例如,创建一个名为 …...
Linux ssh远程关闭如何保持进程在后台运行的解决方案
问题描述: Unix/Linux下一般想让某个程序在后台运行,很多都是使用 nohup & 在程序结尾让程序自动运行。 使用SSH远程Linux服务器启动应用,都是使用nohup &命令,结果关闭SSH应用仍然挂断了。 我们很多程序并不象mysqld一…...
TypeScript中的泛型
在 TypeScript(简称 TS)中,泛型(Generics)是一种允许你为组件(如类、接口和函数)定义灵活、可重用的类型的方式。泛型可以看作是一种类型参数化,允许你在声明时定义一个或多个类型占…...
LeetCode-2779. 数组的最大美丽值【数组 二分查找 排序 滑动窗口】
LeetCode-2779. 数组的最大美丽值【数组 二分查找 排序 滑动窗口】 题目描述:解题思路一:滑动窗口与排序解题思路二:0解题思路三:0 题目描述: 给你一个下标从 0 开始的整数数组 nums 和一个 非负 整数 k 。 在一步操…...
RIP与OSPF发布默认路由(华为)
#交换设备 RIP与OSPF发布默认路由 合理使用默认路由可以很大程度上减少本地路由表的大小,并可以较好的隐藏一个网络中的路由信息,保护自身网络的隐秘性 另外如果在同一个路由器两端使用了不同的路由协议,那么如果不做路由引入或者发布默认…...
Android 一个改善的okHttp封装库
Android Studio 使用前,对于Android Studio的用户,可以选择添加: compile project(‘:okhttputils’) 或者 compile ‘com.zhy:okhttputils:2.0.0’ Eclipse 自行copy源码。 二、基本用法 目前基本的用法格式为: OkHttpUtils .get()…...
瓦罗兰特低价区怎么下载 瓦罗兰特低价区下载教程+免费加速器推荐
瓦罗兰特是由拳头发行的游戏,以其丰富的游戏内容和刺激的竞技体验赢得了广大玩家的喜爱。于其它热门的射击游戏不一样的是,我们在游戏中可以选择不的英雄,每一个英雄都有着自己独特的技能,我们还可以在游戏中强行改变地形帮助我们…...
lspci总结
lspci总结 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿!今天我们将探讨一个在 Linux 系统中常用的命令:lspci。lspci 命令用于列出当前系统中的 P…...
Android开启HTTP服务
需求:通过手机给设备升级固件,设备有WIFI 方案:升级包放到APP可以访问的目录,手机开热点并启动一个HTTP服务,设备连接手机热点,另外,设备端开启一个 telnet 服务,手机通过 telnet 登…...
NLP - word2vec详解
Word2Vec是一种用于将词汇映射到高维向量空间的自然语言处理技术。由Google在2013年提出,它利用浅层神经网络模型来学习词汇的分布式表示。Word2Vec有两种主要模型:CBOW(Continuous Bag of Words)和Skip-gram。 1. 模型介绍 Con…...
AI办公自动化:用通义千问批量翻译长篇英语TXT文档
在deepseek中输入提示词: 你是一个Python编程专家,现在要完成一个编写基于qwen-turbo模型API和dashscope库的程序脚本,具体步骤如下: 打开文件夹:F:\AI自媒体内容\待翻译; 获取里面所有TXT文档ÿ…...
一键解压,无限可能——BetterZip,您的Mac必备神器!
BetterZip for Mac 是一款高效、智能且安全的解压缩软件,专为Mac用户设计。它提供了直观易用的界面,使用户能够轻松应对各种压缩和解压缩需求。 这款软件不仅支持多种压缩格式,如ZIP、RAR、7Z等,还具备快速解压和压缩文件的能力。…...
【数学】什么是最大似然估计?如何求解最大似然估计
背景 最大似然估计(Maximum Likelihood Estimation, MLE)是一种估计统计模型参数的方法。它在众多统计学领域中被广泛使用,比如回归分析、时间序列分析、机器学习和经济学。其核心思想是:给定一个观测数据集,找到一组…...
跟张良均老师学大数据人工智能|企业项目试岗实训开营
我国高校毕业生数量连年快速增长,从2021年的909万人到2022年的1076万人,再到2023年的1158万人,预计到2024年将达到1187万人,2024年高校毕业生数量再创新高。 当年高校毕业生人数不等于进入劳动力市场的高校毕业生人数&#x…...
Pentest Muse:一款专为网络安全人员设计的AI助手
关于Pentest Muse Pentest Muse是一款专为网络安全研究人员和渗透测试人员设计和开发的人工智能AI助手,该工具可以帮助渗透测试人员进行头脑风暴、编写Payload、分析代码或执行网络侦查任务。除此之外,Pentest Muse甚至还能够执行命令行代码并以迭代方式…...
10 SpringBoot 静态资源访问
我们在开发Web项目的时候,往往会有很多静态资源,如html、图片、css等。那如何向前端返回静态资源呢? 以前做过web开发的同学应该知道,我们以前创建的web工程下面会有一个webapp的目录,我们只要把静态资源放在该目录下…...
Unity 之通过自定义协议从浏览器启动本地应用程序
内容将会持续更新,有错误的地方欢迎指正,谢谢! Unity 之通过自定义协议从浏览器启动本地应用程序 TechX 坚持将创新的科技带给世界! 拥有更好的学习体验 —— 不断努力,不断进步,不断探索 TechX —— 心探索、心进…...
Python抓取天气信息
Python的详细学习还是需要些时间的。如果有其他语言经验的,可以暂时跟着我来写一个简单的例子。 2024年最新python教程全套,学完即可进大厂!(附全套视频 下载) (qq.com) 我们计划抓取的数据:杭州的天气信息…...
【超越拟合:深度学习中的过拟合与欠拟合应对策略】
如何处理过拟合 由于过拟合的主要问题是你的模型与训练数据拟合得太好,因此你需要使用技术来“控制它”。防止过拟合的常用技术称为正则化。我喜欢将其视为“使我们的模型更加规则”,例如能够拟合更多类型的数据。 让我们讨论一些防止过拟合的方法。 获…...
【Orange Pi 5与Linux内核编程】-理解Linux内核中的container_of宏
理解Linux内核中的container_of宏 文章目录 理解Linux内核中的container_of宏1、了解C语言中的struct内存表示2、Linux内核的container_of宏实现理解3、Linux内核的container_of使用 Linux 内核包含一个名为 container_of 的非常有用的宏。本文介绍了解 Linux 内核中的 contain…...
003.Linux SSH协议工具
我 的 个 人 主 页:👉👉 失心疯的个人主页 👈👈 入 门 教 程 推 荐 :👉👉 Python零基础入门教程合集 👈👈 虚 拟 环 境 搭 建 :👉&…...
web前端组织分析:深入剖析其结构、功能与未来趋势
web前端组织分析:深入剖析其结构、功能与未来趋势 在数字化浪潮的推动下,Web前端组织作为连接用户与数字世界的桥梁,其重要性日益凸显。本文将从四个方面、五个方面、六个方面和七个方面对Web前端组织进行深入分析,揭示其结构特点…...
GitCode热门开源项目推荐:Spider网络爬虫框架
在数字化高速发展时代,数据已成为企业决策和个人研究的重要资源。网络爬虫作为一种强大的数据采集工具受到了广泛的关注和应用。在GitCode这一优秀的开源平台上,Spider网络爬虫框架凭借其简洁、高效和易用性,成为了众多开发者的首选。 一、系…...
实现一个二叉树的前序遍历、中序遍历和后序遍历方法。
package test3;public class Test_A27 {// 前序遍历(根-左-右)public void preOrderTraversal(TreeNode root){if(rootnull){return;}System.out.println(root.val"");preOrderTraversal(root.left);preOrderTraversal(root.right);}// 中序遍…...
串扰(二)
三、感性串扰 首先看下串扰模型及电流方向: 由于电感是阻碍电流变化,受害线的电流方向和攻击线的电流方向相反。同时由于受害线阻抗均匀,故有Vb-Vf(感应电流属于电池内部电流)。 分析感性串扰大小仍然是按微分的方法…...
零基础入门学用Arduino 第四部分(三)
重要的内容写在前面: 该系列是以up主太极创客的零基础入门学用Arduino教程为基础制作的学习笔记。个人把这个教程学完之后,整体感觉是很好的,如果有条件的可以先学习一些相关课程,学起来会更加轻松,相关课程有数字电路…...
网站建设 北京/如何快速搭建网站
BigDecimal 解决double精度丢失问题(加减乘除)参考文章: (1)BigDecimal 解决double精度丢失问题(加减乘除) (2)https://www.cnblogs.com/ChiRain/p/6211412.html &…...
网站页脚模板/产品推广词
线性代数是一门研究线性方程组、线性空间、线性变换和矩阵的数学学科。 在线性代数中,我们常常使用矩阵来表示线性方程组,并使用向量来表示线性空间中的向量。 我们还可以使用矩阵乘法来表示线性变换,这样就可以使用线性代数的工具来研究各种…...
设计本源/手机端关键词排名优化软件
一.问题与数据表1为A、B两种闪烁液测定血浆中3H-cGMP的交叉试验结果。第1阶段1、3、4、7、9号用A测定,2、5、6、8、10号用B测定;第2阶段1、3、4、7、9号用B测定,2、5、6、8、10号用A测定,试对交叉试验结果进行分析。二.…...
wordpress后台密码忘记/营销宝
优化之路:精简VB程序的代码Java教程 1.标志符名称 2.注释 3.空行 其他元素,如变量、窗体和过程,确实要占用内存的一部分空间,最好将它们精简以使效率更高。当应用程序作为一个.exe文件运行时,有几项技术…...
中山精品网站建设方案/2024最火的十大新闻
要点: 案例注意点vuex的引入是在store.index.js中 然后就是对于没有逻辑的方法,就可以直接再组件方法调用commit去直接连接mutations:this.$state.commit(大写方法名,数据) 对那些需要逻辑判断定时器,需要发送ajax请求的都需要在组件方法调用dispatch…...
做国外购物的网站怎么发货/百度发视频步骤
高阶函数英文叫Higher-order function。什么是高阶函数?我们以实际代码为例子,一步一步深入概念。 变量可以指向函数 以Python内置的求绝对值的函数abs()为例,调用该函数用以下代码: 1 2 >>>abs(-10) 10 但是,…...