vue3在自定义hooks中使用useRouter报错的解决方案

目录
  • 自定义hooks中使用useRouter报错
    • useRouter
    • useRoute
  • 使用Vue.use()报错“Cannot read property ‘use‘ of undefined”
    • 原因
    • 正解

自定义hooks中使用useRouter报错

随着vue3的更新,vue-router也更新到了4.x

useRouter

相当于vue2的this.$router全局的路由实例，是router构造方法的实例

useRoute

相当于vue2的this.$route表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的 route路由记录

但是在一次使用中发现

import { useRoute, useRouter } from "vue-router"

useRoute, useRouter必须写到setup中,详见vue-next-router.强行在函数中使用这两会报undefined,导致无法获取路由数据和路由方法

那么想要在自定义hooks中使用路由怎么办呢？

经过摸索,可以直接从路由引入路由对象

// import { useRoute, useRouter } from "vue-router"
import Vrouter from "@/router"
 
// const router = useRouter();
// const route = useRoute();
 
const route = Vrouter.currentRoute.value
const router = Vrouter

监测当前路由同理

eg：

watch(() => Vrouter.currentRoute.value.query,
    (query) => {
      ListParams.value = Object.assign(params,query)
      res.value = handleParams()
    })

注意：千万别直接监测整个router对象

使用Vue.use()报错“Cannot read property ‘use‘ of undefined”

问题：在学习Vue 3的时候，发现以下代码报错

错误信息为：Cannot read property 'use' of undefined

import Vue from 'vue'
import router from './router'
Vue.use(router)

原因

Vue.use()是Vue 2安装插件的方式

在Vue 3中，import Vue from 'vue'并不能导出”vue“这个包

Vue 3使用createApp(App) 返回应用实例

正解

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue3的自定义hook函数使用

    vue3的自定义hook函数使用

    目录 自定义hook函数使用 vue3 hooks函数示例 官方示例代码---封装前 使用hooks函数封装后 hooks函数 自定义hook函数使用 使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 这里先看一下大体项目结构: 这里的hooks下的文件是示例代码,public内的是测试数据 在启动项目后,测试public的data文件内的数据

  • vue3使用vue-router的完整步骤记录

    vue3使用vue-router的完整步骤记录

    前言 对于大多数单页应用程序而言,管理路由是一项必不可少的功能.随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的. Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router. 一.第一步:安装vue-router npm install vue-router@4.0.0-beta.13 二.第二步:main.js 先来对比一下vue2和vue3中main.js的区别:(第一张为vue2,第二张为vue3) 可以

  • vue3中的hooks总结

    vue3中的hooks总结

    目录 vue3的hooks总结 计数器的hook vue3自定义hooks vue3的hooks总结 vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中.这样其实和我们在vue2中学的mixin比较像.下面我们总结一下如何去书写hooks. 首先应该先建立一个hooks文件夹:其目的是为了存放hook文件. 建立相关的hook文件:一般使用use开头. 计数器的hook useTitle的hooks useScrollPostion用来监

  • Vue3编程流畅技巧自定义Hooks

    Vue3编程流畅技巧自定义Hooks

    目录 Vue3自定义Hooks让写Vue3更畅快 Vue3自定义Hooks定义: 为什么Vue3要用自定义Hook?: 写Vue3请摆脱Vue2无脑this的思想: 几张动图复习Composition Api的好 Composition Api解耦Vue2 Option Api实现低耦合高内聚 定义一下Vue3的自定义Hook: 实例: Vue3自定义Hooks和Vue2时代Mixin关系: 1.Mixin难以追溯的方法与属性 2.无法向Mixin传递参数来改变逻辑 3.Mixin同名变量会被覆

  • vue3在自定义hooks中使用useRouter报错的解决方案

    目录 自定义hooks中使用useRouter报错 useRouter useRoute 使用Vue.use()报错“Cannot read property ‘use‘ of undefined” 原因 正解 自定义hooks中使用useRouter报错 随着vue3的更新,vue-router也更新到了4.x useRouter 相当于vue2的this.$router全局的路由实例,是router构造方法的实例 useRoute 相当于vue2的this.$route表示当前激活的路由的状

  • 解决python3中自定义wsgi函数,make_server函数报错的问题

    #coding:utf-8 from wsgiref.simple_server import make_server def RunServer(environ, start_response): start_response('200 OK', [('Content-Type', 'text/html')]) return '<h1>Hello, web!</h1>' if __name__ == '__main__': httpd = make_server('localho

  • vue3使用element-plus中el-table组件报错关键字'emitsOptions'与'insertBefore'分析

    最近用vue3在做一个项目的时候,使用了element-plus中的组件el-table,在本地运行的时候一点错误也没有,但是打包后放到线上环境就开始报错.TypeError: Cannot read properties of null (reading 'insertBefore')和TypeError: Cannot read properties of null (reading 'emitsOptions') 这种报错可能存在三种情况. 然后查看代码的时候,我这边应该是第三种情况,改过

  • webstorm和.vue中es6语法报错的解决方法

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript 把 Javascript Language version 改为 ECMAScript 6 这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错. 2. .vue文件中es6语法报错 (1)打开 Settings => File Types 找到 HTML 添加 *.vue 这样vue文件就相当于html

  • JS 调试中常见的报错问题解决方法

    报错:Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at Function.m.parseJSON (jquery.js:8515) at Object.success (crud.html:45) at j (jquery.js:3143) at Object.fireWith [as resolveWith] (jquery.js:3255) at x (

  • Pycharm中import torch报错的快速解决方法

    Pycharm中import torch报错 问题描述: 今天在跑GitHub上一个深度学习的模型,需要引入一个torch包,在pycharm中用pip命令安装时报错: 于是我上网寻求解决方案,试了很多都失败了,最后在:Anne琪琪的博客中找到了答案,下面记录一下解决问题的步骤: 1.打开Anaconda prompt执行下面命令: conda install pytorch-cpu torchvision-cpu -c pytorch 等待运行结束. 2. 测试torch是否安装成功 impo

  • 教你解决往mysql数据库中存入汉字报错的方法

    教你解决往mysql数据库中存入汉字报错的方法

    一.遇到的问题 在向数据库中存入汉字时遇到这样的问题: Cause: java.sql.SQLException: Incorrect string value: '\xE6\x9F\xAF\xE5\x8D\x97' for column 'user_name' at row 1 二.分析问题 这是由于数据库设计有问题导致的,当初创建数据库的时候直接选择的默认,没有修改为utf-8,后来尝试手动修改还是不行. 尝试把数据库和表的默认字段改为utf8,但是还是不能存汉字. 三.真正的问题 真正的问

  • spring data jpa @Query注解中delete语句报错的解决

    目录 spring data jpa @Query注解中delete语句报错 项目中需要删除掉表中的一些数据 JPA使用@Query注解实例 1. 一个使用@Query注解的简单例子 2. Like表达式 3. 使用Native SQL Query 4. 使用@Param注解注入参数 5. SPEL表达式(使用时请参考最后的补充说明) 6. 一个较完整的例子 7. S模糊查询注意问题 8. 解释例6中错误的原因 spring data jpa @Query注解中delete语句报错 项目中需要删

  • pycharm中keras导入报错无法自动补全cannot find reference分析

    目录 引言 分析 解决方法 理论解释 1. 直接导入keras 2. 从tensorflow里导入keras 3. 从tensorflow.python里导入keras: 4. 不导入keras 总结 引言 目前无论是中文还是国外网站对于如何正确的导入keras,如何从tensorflow中导入keras,如何在pycharm中从tensorflow里导入keras,这几个问题都众说纷纭,往往是互相借鉴给出一个可用的解决方法,但没有更进一步的解释了.常见因为keras导入引发的问题有以下几个:

  • Luckysheet 在vue中离线使用及引入报错的解决方案(推荐)

    目录 1.git下载源码运行打包dist 2.将dist文件引入项目 3.应用 4.常见报错 1.git下载源码运行打包dist git 源码地址:https://github.com/mengshukeji/Luckysheet 下载好源码之后执行 npm install npm install gulp -g //跑去源码看看正常与否 npm run dev //如果正常执行打包 npm run build 打包结束后在目录下找到 dist 文件 2.将dist文件引入项目 将dist离线包

随机推荐