useRoute,userRouter的用法

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

相关文章

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

关于uni-app 中 使用async + await 将异步请求同步化

这段时间在使用uni-app开发小程序,希望在页面加载时,获取地区数据,然后展示到页面上。一开始写在了onLoad方法上,发现页面加载时,用异步uni.request方法获取数据,当页面加载完后,异步...

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

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

vue项目上安装SCSS

原文:https://blog.csdn.net/zhouzuoluo/article/details/81010331  ① 使用vue-cli模板创建新项目:vu...

Vue3二维码生成

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

vuex存储和本地存储(localstorage、sessionstorage)的区别

1. sessionStorage    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。   用法: ...

发表评论    

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