vue路由传参和react 路由传参

路由跳转的方式

1、声明式导航 <router-link to="导航的地址">

2、编程式导航

编程式导航有三种方法来进行导航

router.push router.replace router.go

params传参和query传参

1、 params 传参(不在URL中显示参数)

  • 在父路由跳转到子路由时,也可以通过params传递参数。

  • 参数不会显示在URL中,不能直接在URL中看到传递的参数。

  • 使用$router.push方法进行跳转,并在params对象中传递参数。

  • 在子路由中通过$route.params来获取传递的参数。

复制代码
编程式
javascript 复制代码
this.$router.push({
    name:'about', //组件名
    params: {id:'1'}  //传递的参数 {key:value,key:value}
})
复制代码
声明式
html 复制代码
//(对象 )写法:name:'组件名称; params:{参数名称:参数}  
<router-link :to="{name:'about',params:{name:'路由传参'}}">
    跳转传递参数
</router-link>
​

通过this.$route.params

缺点:不能直接在URL中看到传递的参数,刷新页面会造成传递的参数丢失

2、params传参 (显示参数)

  • 在父路由跳转到子路由时,可以通过params传递参数。

  • 参数会显示在URL中,可以直接在URL中看到传递的参数。

  • 在子路由中通过$route.params来获取传递的参数。

  • to是跳转的地址,params是传递的参数

这种字符串写法需要提前配置路由才能实现

javascript 复制代码
{ 
path: "/about/:id", 
name: "about", 
component: () => import("../views/about/about.vue")
 },

(写法1):声明式 router-link

javascript 复制代码
动态传参 <router-link :to="`/about/${id}`"></router-link>

传固定值 <router-link :to="`/about/${id}`"></router-link>

(写法2):编程式 this.$router.push({ })

javascript 复制代码
this.$router.push({
    path:`/about/${1}`, //模板字符串,动态传参写法
  //path:'/about/1'    //直接传固定值

可以在页面的URL地址中看到传递的参数,且刷新不会丢失

3、query方式传参

  • 在父路由跳转到子路由时,可以通过query传递参数。

  • 参数会显示在URL中,可以直接在URL中看到传递的参数。

  • 使用$router.push方法进行跳转,并在query对象中传递参数。

  • 在子路由中通过$route.query来获取传递的参数。

    声明式

html 复制代码
<router-link :to="{path:'/about',query:{id:'query传参'}}">
    query传参
</router-link>

编程式

javascript 复制代码
name 和 path 都能用。用 path 的时候,提供的 path 值必须是相对于根路径的相对路径,
//而不是相对于父路由的相对路径,否则无法成功访问。
this.$router.push({
     path:'/about',
     // name:'about',
     query:{
     id:1
  }
})

获取query参数

this.$route.query;

可以在页面的URL地址中看到传递的参数,刷新页面不会造成传递参数的丢失

react 传参方式

react router v6 获取传参需要用两个 hook,分别是 useParams(params)和 useSearchParams(search)

(1)useParams

params 传参

javascript 复制代码
import { NavLink } from 'react-router-dom';
​
{/* 路由定义 /article/:id */}
<NavLink to={`/article/1`}>文章1</NavLink>

接收参数

javascript 复制代码
import { useParams } from 'react-router-dom'
​
/* params */
const params = useParams();
const { id } = params;

(2)useSearchParams

search 传参

javascript 复制代码
import { NavLink } from 'react-router-dom';
​
<NavLink to={`/article?id=1`}>文章1</NavLink>

接收参数

javascript 复制代码
import { useSearchParams } from 'react-router-dom'
​
/* search */
let [searchParams, setSearchParams] = useSearchParams();
const { id } = searchParams;

(3)useLocation

state 传参

javascript 复制代码
import { NavLink } from 'react-router-dom';
​
<NavLink to="/article" state={{ id: 1 }}>文章1</NavLink>

接收参数

javascript 复制代码
import { useLocation } from 'react-router-dom'
​
let location = useLocation();
const { id } = location.state;
相关推荐
程序猴老王11 分钟前
el-select 和el-tree二次封装
前端·vue.js·elementui
blzlh23 分钟前
手把手教你做网易云H5页面,进大厂后干的第一件事
前端·javascript·css
贩卖纯净水.1 小时前
网站部署及CSS剩余模块
前端·css
Justinc.1 小时前
CSS3_BFC(十二)
前端·css·css3
梅子酱~1 小时前
Vue 学习随笔系列十七 -- 表格样式修改
javascript·vue.js·学习
刺客-Andy1 小时前
React第四节 组件的三大属性之state
前端·javascript·react.js
黄毛火烧雪下1 小时前
React 表单Form 中的 useWatch
前端·javascript·react.js
爱健身的小刘同学2 小时前
钉钉免登录接口
前端·javascript·钉钉
啵咿傲2 小时前
跨域相关的一些问题 ✅
前端
命运之光2 小时前
生日主题的烟花特效HTML,CSS,JS
前端·javascript·css