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来获取传递的参数。

编程式

this.$router.push({
    name:'about', //组件名
    params: {id:'1'}  //传递的参数 {key:value,key:value}
})

声明式

//（对象 ）写法：name:'组件名称; params:{参数名称:参数}  
<router-link :to="{name:'about',params:{name:'路由传参'}}">
    跳转传递参数
</router-link>
​

通过this.$route.params

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

2、params传参 (显示参数)

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

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

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

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

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

{ 
path: "/about/:id", 
name: "about", 
component: () => import("../views/about/about.vue")
 },

（写法1）：声明式 router-link

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

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

（写法2）：编程式 this.$router.push({ })

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

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

3、query方式传参

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

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

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

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

  声明式

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

编程式

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 传参

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

接收参数

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

（2）useSearchParams

search 传参

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

接收参数

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

（3）useLocation

state 传参

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

接收参数

import { useLocation } from 'react-router-dom'
​
let location = useLocation();
const { id } = location.state;