路由跳转的三种方式

简介: 最近在学习Vue3,现在来说一下自己的学习感受,并且分享一些小知识点。

前言

最近在学习Vue3,现在来说一下自己的学习感受,并且分享一些小知识点。

可能这些知识点并不是那么属于Vue3的知识范畴,但是这是我在学习过程中遇到并且记录下来的,对于我而言,是Vue3让我遇到了这些知识,哈哈哈哈,我就这么归类辣!

感想

这次使用的是Vite,之前都是用的vue-cli,Vite使用起来就一个字,快!

认真的去做一个自己的全栈项目,所以能封装起来用的地方,都尽量去封起来了,减少以后的代码量。

后端使用的是koa,也是第一次自己尝试去写后端。等这个项目写完,会继续分享一些踩坑小技巧的。

开始了,奇奇怪怪的小知识

路由跳转的三种方式

在此之前确实我就知道两种,Composition API的这种方式是我所不知道的,涨知识了!

router-link

<router-link to"/login">去登陆</router-link>

传统跳转(options API)

<template>
    <el-button @click="goLogin">去登陆</el-button>
</template>
<script>
    export default{
        name:'home',
        methods:{
            goLogin(){
                this.$router.push('/login')
            }
        }
    }
</script>

Composition API跳转

<script setup>
import { useRouter } from 'vue-router'
let router = userRouter()
const goLogin = ()=>{
    router.push('/login')
}
</script>

注意:setup是钩子函数,如果像第三个例子写的话,里面的函数都属于钩子范畴,可以像第二种方式那样,setup类似于methods,完后将它return出去应该也是可以的。

下面为上面注意中,方法的实现代码

大体上还是options API的写法,只是setup的思想属于composition API范畴,应该属于框架迁移过程中的写法吧

<template>
  <el-button @click="goLogin">去登陆</el-button>
</template>

<script>
import { useRouter } from 'vue-router'
export default{
  setup(){
    let router = useRouter()
    function goLogin(){
      router.push('./login')
    }
    return { goLogin }
  }
}
</script>

写在最后

要一直在路上呀!加油!

点个赞,一起努力加油吧♥

相关文章
|
JavaScript 前端开发 Java
基于SpringBoot+Vue实现前后端交互功能(详解Vue框架机制)
基于SpringBoot+Vue实现前后端交互功能(详解Vue框架机制)
|
存储 关系型数据库 MySQL
OceanBase数据库 与 mysql 对比
OceanBase数据库 与 mysql 对比
5727 1
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
在Ant Design的Upload组件中,`onChange`事件处理函数接收一个对象参数,其中`file`字段在不同情况下可能是一个File对象或包含`originFileObj`属性的对象。为了兼容,可以使用`info.file.originFileObj ? info.file.originFileObj : info.file`来确保获取到原始的File对象。官方建议这种写法,并将在未来的大版本中统一返回包含`originFileObj`属性的对象。
540 1
项目中使用antd中的upload组件file对象到底是info.file还是info.file.originFileObj_坑
|
10月前
|
人工智能 数据可视化 数据库
低代码平台:技术复杂性的系统简化
低代码平台通过模块化和自动化技术重新定义开发流程,简化应用构建。它支持“一键编程”和“快速迭代”,降低开发复杂度,提供敏捷开发能力。可视化开发、分布式协作、无缝部署等特性提高了整体协作效率。平台优化了五大核心引擎(SQL、功能、模板、图表、切面),提升开发灵活性与性能。此外,低代码平台还融合AI技术,提供智能代码生成、自动优化和故障排查等功能,进一步提高开发效率。插件生态覆盖多行业场景,支持实时数据处理、AI模型训练、图像处理等。开放架构结合微服务和开源框架,确保高性能与可扩展性。低代码平台正逐步成为企业技术创新的实用助手,助力快速响应市场需求。
262 22
|
12月前
|
安全 网络安全 网络架构
什么是端口转发?什么是端口映射?如何设置端口映射
端口映射与端口转发是网络配置中两个常被混淆的概念。端口映射是指将外部网络请求通过路由器转发至内部网络特定主机的过程,增强了内网安全性。而端口转发则是指路由器依据端口将外部请求定向至具体设备,实现内外网通信。两者虽相似,但应用场景和原理有所不同。通过工具如花生壳,可轻松设置端口映射,实现外网访问内网服务。
2487 1
|
负载均衡 安全 应用服务中间件
揭秘反向代理:探索其神秘之处
揭秘反向代理:探索其神秘之处
|
Kubernetes Docker 容器
【Docker专栏】Docker网络配置详解:从Bridge到Overlay
【5月更文挑战第7天】本文介绍了Docker的四种网络类型:Bridge(默认,每个容器连接虚拟桥)、Host(容器共享宿主机网络命名空间)、Overlay(跨宿主机通信,适合集群环境)和Macvlan(容器直接连接物理网络)。Bridge网络适用于同主机通信,而Overlay适合多主机集群。Host网络缺乏隔离,Macvlan则让容器直接连到外部网络。理解这些网络类型有助于优化Docker容器的网络配置。
807 8
【Docker专栏】Docker网络配置详解:从Bridge到Overlay
|
存储 安全 算法
如何优化Java中的HashMap性能?
如何优化Java中的HashMap性能?
|
存储 缓存 搜索推荐
复杂系统设计原则与案例
## 一、复杂是软件的本质属性 ### 1.1 复杂是软件的本质属性 正如Brooks所言,软件复杂性是软件固有的属性,这种固有的复杂性主要由4个方面的原因造成的: - 问题域的复杂性 - 管理开发过程的复杂性 - 随处可变的灵活性 - 描绘离散系统行为的问题 上面每一个方面都有极大的挑战,以「问题域的复杂性」为例,现在我们的大型系统中,动不动就几十个应用,组合在一起就是一个复杂的系统,而每个
1680 4
复杂系统设计原则与案例
|
监控 项目管理
通俗易懂的方式理解项目管理的49个过程(追妹子案例)
通俗易懂的方式理解项目管理的49个过程(追妹子案例)
341 0

热门文章

最新文章