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用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 使用VueRouter的addRoutes方法实现动态添加用户的权限路由

    最近做vue 单页项目涉及到多角色用户权限问题,不同的角色用户拥有不同的功能权限, 不同的功能权限对应的不同的页面 git: https://github.com/pch1024/dynamicRouter 举个例子: 角色A =>功能1 =>功能2 =>功能3 角色B =>功能1 =>功能4 =>功能5 第1步 定义默认路由和动态路由 //动态路由(所有角色的都在这里,我们都做好组件页面了所以我们一定有这个,防君子不防小人) export const dynamicR

  • 使用vue-router在Vue页面之间传递数据的方法

    前言 几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章.这是在应用程序中探索的一个基本例子. 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面.(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息. 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据. 如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下. 利用 U

  • vue-router跳转时打开新页面的两种方法

    最近还是在痛苦的挣扎中 挣扎吧 记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.<vue-link>标签实现新窗口打开 官方文档中说 v-link 指令被 <router-link> 组件指令替代,且 <router-link> 不支持 target="_blank" 属性,如果需要打开一个新窗口必须要用<a>标签,但事实上vue2版本的 <router-link> 是支持

  • 使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    使用vue-router切换页面时，获取上一页url以及当前页面url的方法

    今天在实现一个小功能的时候,遇到一个问题,使用vue-router获取上一页面的url信息,我尝试了多种方式,发现使用vue-router的canDeactivate钩子实现这个功能最为方便,现在将我的实现代码总结如下: 项目使用的是vue-cli,直接贴代码 export default { mixins: [], vuex: { actions: {fetchCertificates}, }, data() { return {} }, route: { data() { this.$roo

  • vue router导航守卫（router.beforeEach()）的使用详解

    导航守卫 导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了

  • Vue Router history模式的配置方法及其原理

    vue-router分为 hash和 history模式,前者为其默认模式,url的表现形式为 http://yoursite.com#home,比较难看.后者的url表现形式为 http://yoursite.com/home,比较美观. 但如果要使用 history模式,我们需要在后端进行额外配置.本文将讨论如何配置以及为什么要这样配置. history模式的配置方法 我们来看看官方文档是教我们怎么配置的:HTML5 History 模式. 首先要将 mode设置为 history: con

  • 对vue2.0中.vue文件页面跳转之.$router.push的用法详解

    vue2.0在使用的过程中, .vue文件之间的跳转,在template中的常见写法是: <router-link to="/miniCard/statement/horizon"> <button class="btn btn-default colorDe">继续</button> </router-link> 但是有时的需求是页面不直接跳转,有确认弹框或者其他事件,此时就需要在js中设置跳转,常用的一种方法是 .

  • 关于vue中 $emit的用法详解

    1.父组件可以使用 props 把数据传给子组件. 2.子组件可以使用 $emit 触发父组件的自定义事件. vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <span @click='select(`大连`)'>大连</span> </div&

  • Vue 中mixin 的用法详解

    说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

  • Vue中$refs的用法详解

    说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D

  • vue中$emit的用法详解

    vue中$emit的用法详解

    目录 vue2.x vue3.x 子组件 父组件 vue2.x 1.父组件可以使用 props 把数据传给子组件.2.子组件可以使用 $emit,让父组件监听到自定义事件 . vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn: 例如:子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:

  • 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插槽原理与用法详解

    Vue插槽原理与用法详解

    本文实例讲述了Vue插槽原理与用法.分享给大家供大家参考,具体如下: 1 插槽内容 Vue 实现了一套内容分发的 API,这套 API 基于当前的 Web Components 规范草案,将 <slot> 元素作为承载分发内容的出口. 它允许你像这样合成组件: <div id="app1"> <navigation-link url="/profile"> Your Profile </navigation-link>

  • Vue.js用法详解

    Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • 基于vue.js中事件修饰符.self的用法(详解)

    .self可以理解为跳过冒泡事件和捕获事件,只有直接作用在该元素上的事件才可以执行. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>self</title> <script src="vue.js"></script> <!--'''''''

  • Vue props用法详解(小结)

    Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件 比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat

随机推荐