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

vue3的js文件中使用vue-router

时间:2023-03-25 11:36:08浏览次数:41  
标签:vue useRoute 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,useRoute,js,vue3,router,useRouter
From: https://blog.51cto.com/echohye/6148987

相关文章

  • Vue3+element-plus图片上传剪裁组件
    userAvatar.vue<template><divclass="user-info-head"@click="editCropper()"><img:src="options.img"title="点击上传头像"class="img-circleimg-lg"/>......
  • vue中css变量的使用
    1、在css中使用变量(1)css中声明变量--color:red(2)使用变量color:var(--color)//color:red获取到全局声明变量值为red2、使用vue中的变量(1)在html标签中<span:style="{......
  • Vue3+element-plus图片上传剪裁组件
    userAvatar.vue<template><divclass="user-info-head"@click="editCropper()"><img:src="options.img"title="点击上传头像"class="img-circleimg-lg"/>......
  • Vue + node简单实现验证码
    web实现验证码思路(个人简单示例操作,流程可能并不规范,仅提供演示,请勿抬杠)验证码代码流程前端发送get请求来获取验证码图片。后端收到前端的生成验证码请求,生成验证码图片......
  • 初识JSON、JSON的3种形式、JSON的常用方法
    初识JSONJSON是什么Ajax发送和接收数据的一种格式XMLusername=alex&age=18JSON全称是JavaScriptObjectNotation......
  • vue-element-admin 运行踩坑笔记
     [email protected]:ThisSVGOversionisnolongersupported.Upgradetov2.x.x.npmERR!Errorwhileexecuting:npmERR!G:\ForCodeSoftw......
  • vs code 的 settings.json配置
    {"workbench.colorTheme":"Monokai","editor.matchBrackets":"never","workbench.iconTheme":"vscode-icons","diffEditor.ignoreTrimWhites......
  • vue实现移动端签名功能之 vue-esign插件篇
    1.安装vue-esignnpminstallvue-esign--save2.全局引用  3.代码  4.将生成的base64转成文件  handleGenerate(){   this.$refs.esign  ......
  • vue03 01.创建项目
    目录01.创建项目打包工具vite介绍安装命令启动项目浏览效果代码目录打包预览运行01.创建项目打包工具vite官网vite介绍Vite也是前端构建工具相较于webpack,vite采......
  • vue2 - mockjs的使用
    mockjs官网:http://mockjs.com/ 1.安装mockjsnpminstallmockjs 2.创建mock文件夹并且创建index.js//引入mockjsimportMockfrom"mockjs"//引入数据import......