Vue3.0路由跳转携带参数

一、路由跳转

1、在需要跳转的页面

//引入API---useRouter
import { useRouter } from 'vue-router'
......
//定义router变量
const router =useRouter()
const methodClick=(data)=>{
let paramValue=data.deviceCode
//路由跳转，携带参数
router.push('/equipment/operation?deviceCode='+paramValue)用router.push跳转页面：
例：
// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

2、如果有参数的话，在接收页面引入API–useRoute

import { useRoute } from 'vue-router'
......
//在接收页面定义变量route，获取传过来的变量
const route = useRouter()
onMounted(() => {if (route.currentRoute.value.query.deviceCode) {state.codeDevice2 = route.currentRoute.value.query.deviceCode}
})例：
//首先在setup中定义
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

二、页面传参需要注意的问题

1、如果提供了 path，params 会被忽略，但query 没有这种情况，此时需要提供路由的 name 或手写完整的带有参数的 path

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

2、上述规则同样适用于 router-link 组件的 to 属性
3、如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)

Vue3.0路由跳转携带参数相关推荐

Vue3.0路由跳转方式
Vue3.0路由跳转方式 1.编程式路由导航第一步创建route文件夹以及index.js 上代码 import { createRouter, createWebHistory } from 'v ...
vue 路由跳转携带参数
一.<router-link> 方式跳转 1. 携带query参数 <router-link to="/detail?id=001&title=消息001" ...
vue2.0 点击跳转传参--vue路由跳转传参数
vue中路由跳转传参数有多种,自己常用的是下面的几种通过router-link进行跳转通过编程导航进行路由跳转 1. router-link [html] view plaincopy <r ...
Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...
vue中两种路由跳转拼接参数
this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
uniapp php交互,uni-app路由跳转及参数的传参和接收
1.保留当前页面,跳转到应用内的某个页面,使用uni.navigateTo: 示例: 在起始页面跳转到test.vue页面并传递参数 uni.navigateTo({ url: 'test?id=1& ...
Vue3 实现路由跳转
一.安装 vue-router npm install vue-router@4 二.新建 vue 页面在 src 目录下新建 view 目录用来存放 vue 的页面. 然后在 view目录下新建两 ...
微信小程序点击带id参数跳转_微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 跳转到新页面 (2)wx.navigateTo 方法跳转此方法能够从跳转的页面会回到当前页面 1 w ...
VUE携带参数跳转并回显
实现的功能:点击查看按钮会带参数跳转到新页面,并且要在新页面回显这一些数据(用户名,登陆时间等) 先看一下HTML的button是怎么写的有一个方法: lookAdmin(i),那我们去js里面看一 ...

Vue3.0路由跳转携带参数

一、路由跳转

二、页面传参需要注意的问题

Vue3.0路由跳转携带参数相关推荐

最新文章

热门文章