当前位置: 首页 > 编程笔记 >

vue-router的hooks用法详解

胡鸿羲
2023-03-14
本文向大家介绍vue-router的hooks用法详解,包括了vue-router的hooks用法详解的使用技巧和注意事项,需要的朋友参考一下

虽然Vue 3还没有正式发布,但是热爱新技术的我早已按捺不住自己的内心,开始尝试在小项目中使用它了。

根据这篇《今日凌晨Vue3 beta版震撼发布,竟然公开支持脚手架项目!》我搭建了一个Vue 3的脚手架项目,用这种方式搭建的脚手架项目不仅仅只有vue是新版的,就连vue-router、vuex都是最新的。

给大家截一下package.json的图:

可以看到vue-router和vuex都已经开启4.0时代啦!

不过其实我并没有去了解过vue-router 4.0的新用法什么的,因为我觉得它不像vue 3.0都已经进行到beta的版本不会有特别大的变动。

而vue-router 4.0还是alpha的阶段,所以我认为现在去学习它有些为时尚早。但却就是它!差点酿成了一场惨剧。

旧版vue + vue-router的使用方式

假如你在路由里面定义了一个动态参数通常都会这么写:

{
 path: '/:id'
}

然后用编程式导航的时候通常会这样去写:

this.$router.push('/123')

在组件中是这样获取这个参数的:

this.$route.params.id

我以为的新版vue + vue-router的使用方式

由于vue 3.0的Composition API中没有this了,所以我想到了通过获取组件实例的方式来获取$route:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$route)
})

没想到打印出来的居然是undefined!
这是咋回事呢?
于是我又打印了一遍ctx(ctx是当前组件上下文):

没有$的那些字段是我在组件中自己定义的变量,带$的这些就是vue内置的了,找了半天发现没有$route了,只剩下了一个$router,估计vue-router 4.0把当前路由信息都转移到$router里面去了。

带着猜想,我点开了$router:

currentRoute! 看名字的话感觉应该就是它了!于是乎我:

import { defineComponent, getCurrentInstance } from 'vue'

export default defineComponent((props, context) => {
 const { ctx } = getCurrentInstance()
 
 console.log(ctx.$router.currentRoute.value.params.id)
})

果然获取到了!好开心!

实际的新版vue + vue-router用法

在接下来的过程中我用ctx.$router代替了原来的this.$router、用ctx.$router.currentRoute.value代替了原先的this.$route。

尽管在接下来的进度中并没有出现任何的bug,程序一直都是按照我所设想的那样去运行的。

但在项目打包后却出现了意想不到的bug:在跳转路由的时候报了一个在undefined上面没有push的错误。

奇了怪了,在开发阶段程序都没有任何的报错怎么一打包就不行了呢?依靠多年的开发经验,我很快就定位到了是vue-router的错误。

难道这样写是错的吗?可是我打印了ctx,它里面明明有一个$router、$router里面明明就有currentRoute、currentRoute里面明明就有一个value、value里面明明就有params、params里面我一点开明明就看到了传过来的参数啊:

估计可能是vue-router的bug,果然alpha阶段的产物不靠谱,我开始后悔使用新版的vue脚手架项目了。

vue-router里的hooks

不过这时我突然灵光一现,vue 3不是受到了react hooks的启发才产生了Composition API的吗?

那么估计vue-router肯定也会受到react-router的启发了!

还好我学过react,果然技多不压身啊!估计里面肯定是有一个useXxx,就像这样:

import 
{ 
useXxx 
}
 from 'vue-router'

那么应该是use什么呢?按理来说应该会尽量的和以前的API保持一定的联系,我猜应该是useRoute和useRouter吧!

为了验证我的想法,我打开了node_modules找到了vue-router的源码:

果不其然,在第2454和第2455行我发现它导出了useRoute和useRouter,那么就是它了:

import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'

export default defineComponent(_ => {
 const route = useRoute()
 const router = useRouter()

 console.log(route.params.id)
 router.push('/xxx/xxx')
})

使用这种方式不但可以成功跳转路由,也同样可以获取到路由传过来的参数,这次再打包试了一下,果然就没有之前的那个报错了。

结语

估计以后的vue全家桶要开启全民hooks的时代了,在翻看源码的同时我发现他们把一些示例都写在了vue-router/playground文件夹下了,在里面我发现了一些有趣的用法。

如果有时间的话我会仔细研究一下然后出一篇更加深入的文章给大家,当然如果已经有小伙伴等不及我出新文章的话可以直接进入vue-router-next的github地址:

https://github.com/vuejs/vue-router-next

它的示例都放在了playground这个文件夹下,期待你们研究明白后出一篇更加深入的文章!

到此这篇关于vue-router的hooks用法的文章就介绍到这了,更多相关vue-router hooks用法内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 本文向大家介绍Vue.js路由vue-router使用方法详解,包括了Vue.js路由vue-router使用方法详解的使用技巧和注意事项,需要的朋友参考一下 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的

  • 本文向大家介绍详解vue-router基本使用,包括了详解vue-router基本使用的使用技巧和注意事项,需要的朋友参考一下 路由,其实就是指向的意思,当我点击页面上的home  按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮  => home 内容, about按钮 => about 内容,也可以说是一种映射。 所以在页面

  • 本文向大家介绍Vue-Router的使用方法,包括了Vue-Router的使用方法的使用技巧和注意事项,需要的朋友参考一下 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生。 路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页

  • 本文向大家介绍Vue.js路由组件vue-router使用方法详解,包括了Vue.js路由组件vue-router使用方法详解的使用技巧和注意事项,需要的朋友参考一下 使用Vue.js + vue-router 创建单页应用是非常简单的。只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可。 一、普通方式基本例子: 二、块化机制编程基本例子,以在vue-cli中的使用方法为例

  • 本文向大家介绍VueJs路由跳转——vue-router的使用详解,包括了VueJs路由跳转——vue-router的使用详解的使用技巧和注意事项,需要的朋友参考一下 对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成。 安装 基于传统,我更喜欢采用npm包的形式进行安装。 当然,官方采用了多种方式进行安装,包括bower,cdn等。 基本用法 在H

  • 本文向大家介绍vue-router 起步步骤详解,包括了vue-router 起步步骤详解的使用技巧和注意事项,需要的朋友参考一下 1.在main.js中导入vue-router和组件 2.为组件设置URL,通过url可以动态的加载组件 3.配置vue-router对象并挂载 4.配置连接的出口,实现动态的加载组件 现在,可以通过url动态加载我们的组件 5.将连接入口,挂载到网页上 可以通过点击