路由跳转的三种方式

简介: 最近在学习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>

写在最后

要一直在路上呀!加油!

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

相关文章
|
8天前
|
JavaScript 数据安全/隐私保护 UED
UniApp 中的路由魔法:玩转页面导航与跳转
UniApp 中的路由魔法:玩转页面导航与跳转
36 3
|
1月前
|
JavaScript Go
路由跳转及路由传参
路由跳转及路由传参
12 1
|
1月前
|
小程序
小程序页面路由传参的方法?
小程序页面路由传参的方法?
15 0
|
1月前
|
JavaScript
vue路由获取菜单名称和路由跳转传参
vue路由获取菜单名称和路由跳转传参
7 0
|
4月前
Umi路由跳转传参方式都有哪些?
Umi路由跳转传参方式都有哪些
64 0
|
9月前
|
小程序
微信小程序路由跳转的方法和区别
微信小程序路由跳转的方法和区别
197 0
|
9月前
|
小程序 JavaScript 开发者
【uniapp】小程序分包、路由跳转
【uniapp】小程序分包、路由跳转
446 0
|
10月前
|
JavaScript
Uuiapp使用生命周期,路由跳转传参
Uuiapp使用生命周期,路由跳转传参
91 0
|
11月前
|
前端开发 Go
React 路由的使用以及bug规避:路由跳转、路由传参、嵌套路由
React 路由的使用以及bug规避:路由跳转、路由传参、嵌套路由
149 0
|
小程序 数据库
微信小程序:全局路由登录拦截和分享参数过长的问题
微信小程序:全局路由登录拦截和分享参数过长的问题
389 0
微信小程序:全局路由登录拦截和分享参数过长的问题