首页 > 其他分享 >vue3的js文件中使用vue-router

vue3的js文件中使用vue-router

时间:2023-03-18 20:55:07浏览次数:46  
标签:文件 vue js vue3 router useRouter

import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
router.push({ path: '/index'})

这种在正常.vue文件中引入没有任何问题,但在js文件中,引入

import { useRoute, useRouter } from 'vue-router'
console.log(useRouter())
// 打印结果为undefined

控制台警告[Vue warn]: inject() can only be used inside setup() or functional components.

原因是,在vue3中第一种useRouter的引入方式是vue3的hooks,因此在js文件中需要导入你创建的router文件即可

import router from '@/router/index.js'
router.push({ path: '/index'})
// 正常跳转

标签:文件,vue,js,vue3,router,useRouter
From: https://www.cnblogs.com/echohye/p/17231728.html

相关文章

  • Vue实现图片点击隐藏效果
    前言:组件作为Vue.js最强大的功能之一,因其封装可复用的代码方便程序员调用和可根据需求对组件进行个性化开发而深受广大前端程序员的喜爱。组件化的开发大大提升了代码的复......
  • ## react和vue的区别
     react和vue对比,选型问题:1.(切入点dom操作)都有一个特点,不进行dom操作就能操作页面了,原生开发中dom操作是昂贵的,改变页面就必须操作dom,vue和react都使用虚拟dom实......
  • Vue2入门之超详细教程三-初识模板语法
    1、简介模板语法就是按照固定的模板去书写代码,分为插值语法和指令语法。差值语法:功能:用于解析标签体内容写法:{{xxxx}},xxx是js表达式,且可以读取......
  • vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度
    vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度Author:zhoulujun Date:2023-03-06 Hits:5解决文本溢出,鼠标悬浮展示tooltips,要解决2大难题。第一个是解决文本宽......
  • nodejs的全局变量探讨之二
    之前写过一篇博文对nodejs全局变量做了一些验证,本篇博文将继续探讨这个话题。建议先看下前篇博文:​​https://blog.51cto.com/livestreaming/5258039​​好了,我们开始今天的......
  • ua-parser-js 获取浏览器信息
    这个依赖能精准识别当前访问的浏览器相关信息,亲测好用 点击访问github链接 使用示例letparser=newUAParser();console.log(parser);console.log(parser.getO......
  • vue2升级vue3:vue-i18n国际化异步按需加载
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩......
  • JS数组reduce()方法详解及高级技巧
        参考:https://www.cnblogs.com/webSnow/p/15262337.html......
  • js中的includes用法
    js中的includes用法1.数组includes可以判断一个数组中是否包含某一个元素,并返回true或者false['a','b','c'].includes('a')true['a','b','c'].includes(1)false......
  • vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度
    vue3溢出文本tooltip或title展示解决方案—如何获取文本宽度Author:zhoulujun Date:2023-03-06 Hits:5解决文本溢出,鼠标悬浮展示tooltips,要解决2大难题。第一个是解决文......