useRoute,userRouter的用法

hykeda3年前Vue2516
 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

相关文章

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

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

Vue3二维码生成

一、装上插件npm install --save qrcode.vue二,引入插件到页面中import QrcodeVue from ...

vite+vue 插件/组件集合

自动引入插件:https://github.com/antfu/unplugin-auto-importvue的按需组件自动导入:https://github.com/antfu/unplugin-v...

前端常用的UI组件库

Arco DesignTaro UISemi DesignAnt DesignElementView DesignVantLayui-vueFusion Design1. Arco Desi...

Vue2.x笔记

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

学习lodash

官网:https://www.lodashjs.com/ 链接:https://www.jianshu.com/p/d46abfa4ddc9 简介 L...

发表评论    

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