• url params：稳定，参数不易丢失；但如果要带很多参数就麻烦且丑
• query params：方便优雅；但参数易丢失或者被覆盖
• state: 刷新url, 参数就没有了

所以我个人认为：

• url params适用场景：路径中的url params不同，会对应不同的UI
• query params/state适用场景：参数一般是页面中需要使用的数据，携带后对页面的渲染起辅助作用

可以通过我自己总结的这个流程图判断：

（注：上图黑字只是举例，不绝对，主要看情况判断）

举例子
如果你有一个总览页面和一个详细页面，用哪一种带参数的方式？

一般来说，总览页面 & 详细页面应该是两个不同的UI组件，这种的话用url params更好。
即，
route path为 -------- /myurl/:pageType
当url为 -------- /#/myurl/overview -------- 对应的是总览页面
当url为 -------- /#/myurl/details -------- 对应的是详细页面

如果当详细页面有很多页，要把页码带上，就可以用query params:
/#/myurl/details?pageNum=2

用以上流程图的思路来讨论 - 文章id该用哪种方式？
文章id应该用details/:id 还是 details?id=111

用上面的流程图中看，是不是没了该参数，它就不能正确渲染了？

在csdn中，对于一篇文章，没了id就是不能渲染了，所以它是url params
https://blog.csdn.net/zrq1210/article/details/108350008

但是在编辑的时候，把articleId=108350008删除了，仍然可以渲染编辑文章的初始界面，因此它就是用query params带的
https://editor.csdn.net/md?articleId=108350008

一个用react router hooks写的函数组件，综合使用了所有带参数的方法

import React from 'react';
import { useParams, useLocation, useHistory } from 'react-router-dom';
import qs from 'qs';
function MyUrl () {
    // 跳转url
    const history = useHistory(); // hook: useHistory
    function changeUrl () {
        history.push({
            pathname: '/myurl/2',
            search: 'name=chris',
            state: { fromSource: 1 },
    // 获取match params
    const params = useParams(); // hook: useParams
    const { id } = params;
    // 获取location params
    const location = useLocation(); // hook: useLocation
    const { search, state = {} } = location;
    // 获取location.search中的参数
    const { name } = qs.parse(search.replace(/^\?/, ''));
    // 获取location.state中的参数
    const { fromSource } = state;
    return (
                myurl id: { id },<br/>
                search name: { name },<br />
                state fromSource: { fromSource },<br />
            </div>
            <div onClick={ changeUrl }>
                change url
            </div>
        </div>
export default MyUrl;
// 路由
const route = {
    path: '/myurl/:id',
    component: myUrl,
<Route path={route.path} component={route.component} />
http://localhost:80/myproject/#/myurl/2?name=chris
组件UI显示：
 
                    方法一：/myurl?id=1&amp;name=chris通过location.search基本方法1.react-route配置:const route = {    path: '/myurl',    component: myUrl,};&lt;Route path={route.path} component={route.component} /&gt;2.跳转url时携带参数的方法：const id = 1; const name = 'chris';this.pr
				
URL 参数解析
URL 参数是追加到URL 上的一个名称/值对。参数以问号 (?) 开始并采用 name=value 的格式。如果存在多个 URL 参数，则参数之间用一个 (&) 符隔开。下面的示例显示带有两个名称/值对的 URL 参数：
http://server/path/document?name1=value1&name2=value2
如：http://www.baidu.c




    

<script>
	var dataHref = $(this).attr("data-href");
	var href = dataHref+"?url="+url+"&name="+name+"&enName="+enName+"&type="+type;
	window.location.h...
什么是RESTful风格呢？
对应的中文是rest式的;Restful web service是一种常见的rest的应用,是遵守了rest风格的web服务;rest式的web服务是一种ROA(The Resource-Oriented Architecture)(面向资源的架构).
什么是REST呢...
				
利用 url 传递参数
官方推荐是使用 name 属性来传递参数。
url 地址也可以用来传递参数，这是常识，在前端编程中，也经常使用，以下是 Vue.js 如何使用 url 来进行参数的传递。
使用 url 传递，自然需要在 url 上进行更改，首先将 App.vue 中的 <router-link> 标签中的 to 属性进行修改。
<template>
  <di...
				
URL（Uniform Resource Locator,统一资源定位器）
protocol://host:port/path?query#fragment
由这几部分组成：协议类型 + 主机域名 + 端口 + 资源路径 (带 [] 的为选填)
protocol (协议)：主要有HTTP、HTTPS、FTP等。
host (主机名)：存放资源的服务器主机名或IP地址。
port (端口)：整数，可选，省略时使用方案的默认端口，各种传输协议都有默认的端口号，如http的默认端口为80。有时候出于安
				
History.pushState()
history.pushState(state, title, url) : 无刷新的向浏览器 历史最前方 加入一条记录。
state(any) 需要保存的数据，这个数据在触发popstate事件时保存在event.state上。
title(string)：
Firefox 目前忽略了這個參數，雖然他以後有可能會採用。如果以後改變了這個作法，傳送空白的字串應該還會是安全的。另外，你可以傳送一個短的標題來敘述你想要到的state。
目前没有发现有地方保存这个titl.
通过params
	类组件：在保证props能获取到路由信息的前提下（如果不是直接嵌套在<Route/>下，需要使用withRouter的HOC），通过this.props.match.params获取
		函数式组件：const params = useParams();
	通过search,demo如下：
// query传参
this.props.history.push({
    pathname: 
				
是基于我写的上一篇文章《用react的路由写一个简单的导航》上面扩展出来的，朋友们可以去康康。
https://blog.csdn.net/qq_42505615/article/details/121118546
先看看我们需要得到的效果：
点击【姓名007】，咱们可以进去看到007的其他详细信息。