vue3 router路由跳转传参

时间:2025-04-01 08:00:28

一、路由跳转页面需要再组件页面引入

import {userRouter} from ‘vue-router’
const router=userRouter();//相当于vue2中的this.$router

路由跳转

({name:'A'});
({path:'/A'})

传参 query传参

//子路由配置
{
  path: '/A,
  name: 'A',
  component: A
}
//组件使用
({name:'A',query:{id:""});
({path:'/A',query:{id:''});

传参params

//子路由配置
{
  path: '/A/:id,//不可以省略 否则刷新页面获取不到id
  name: 'A',
  component: A
}
({path:'/A',parmas:{id:''});

在接收页面定义变量route,获取传过来的变量

在组件内获取parmas传递的参数

import {userRoute} from ‘vue-router’
const route=userRoute();//相当于vue2中的this.$route

在组件内获取query传递的参数

import {userRoute} from ‘vue-router’
const route=userRoute();//相当于vue2中的this.$route