useRoute,userRouter的用法

hykeda2年前Vue1569
 import { useRoute, useRouter } from 'vue-router';

 这里的useRoute是获取传递的变量:

const route = useRoute()

console.log(route.query) //get

console.log(route.params) //post

这里的useRouter是控制路由,构建跳转地址等:

 import { useRouter } from 'vue-router'
    export default {
        setup() {
            const userRouter = useRouter()
            userRouter.push("/home")
        }
    }

params 方式传递参数:

const userRouter = useRouter()
    userRouter.push({
        name: 'Home',
        params: {
             name: 'dx',
             age: 18
         }
    })

用query方式传递:

import { useRouter } from 'vue-router'
export default {
    setup() {
        const userRouter = useRouter()
        userRouter.push({
            path: '/',
            query: {
                name: 'dx',
                age: 18
            }
        })
    }
}


标签: vue3userRouter

相关文章

Vue2.x笔记

vue2.0 开始不能挂载到<html> 或者 <body> 上。 transition 动画过渡的时候,如果是:<transit...

Vuex 通俗版教程告诉你Vuex怎么用

最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的。对于vuex也运用一段时间,但是总觉得...

vue3项目,Element-plus ElMessage API 调用样式丢失问题

1、Element-plus使用了自动按需导入,vite.config.js配置如下:defineConfig({     plugins: [...

vue 中父组件要向子组件通过props传值出现延时处理方案

在开发vue是,父组件要向子组件传值,但是这个值是父组件通过接口请求的,如果直接通过<ABC :abc="data"/>这样在子组件中获取到的abc是为空,因...

vue3中defineProps传值使用ref响应式失效详解

子组件接收父组件的传参。父组件:<template> <Son :data="data"/> </template> <s...

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。