老师 既然state可以在编程式和声明式路由携带参数，为什么还有动态路由去携带参数呢？

Answer 1

西门老舅 2023-04-14 08:42:21

你好，state携带的参数是隐式的，并不会暴露在URL上，这样对于一些不想让用户看到的数据是可以的，但是带来的问题就是一刷新就丢失数据了，而动态路由(params)或search值(query)是可以把数据挂载到URL上，好处就是刷新的时候还是可以获取到数据的，所以看开发需求决定，并不能完全替代的。

• 提问者 慕先生7102758 #1

  老师：路由不是分为两种嘛？编程式路由--利用useNavigate函数（等同于router.push），声明式路由<link to>,那动态路由是不是属于声明式路由，只不过是声明式路由的动态传参，对于路由的传参，就是params和query 这几个东西 我感觉有点混淆，希望老师能详细的对比vue的一起说下，react和vue的路由 及两种传参方法，拜托麻烦老师了，或者有个思维图也可以

• 西门老舅 回复 提问者 慕先生7102758 #2

  声明式路由和编程式路由指的是路由跳转的方式，即声明式路由表示在结构(HTML)中跳转路由，而编程式路由表示在逻辑(JS)中跳转路由，这两种方式都是可以携带params和query参数的。
  Vue中：
  Vue声明式，不携带数据:  <router-link to="/index">首页</router-link>   
  Vue声明式，携带params数据:  <router-link to="/detail/123">详情页</router-link>
  Vue声明式，携带query数据:  <router-link to="/list?city=65">列表页</router-link>
  
  Vue编程式，不携带数据：<script> router.push('/index') </script>
  Vue编程式，携带params数据：<script> router.push('/detail/123') </script>
  Vue编程式，携带query数据：<script> router.push('/list?city=65') </script>
  
  注：在Vue中也可以采用 query 和 params 这个属性传递数据
  举例：
  声明：<router-link :to="{path: '/xxx', query: { xxx }, params: { xxx }}">xxx</router-link>
  编程：router.push({ path: '/xxx', query: { xxx }, params: { xxx } })
  
  React中：
  React声明式，不携带数据:  <Link to="/index">首页</Link>   
  React声明式，携带params数据:  <Link to="/detail/123">详情页</Link>
  React声明式，携带query数据:  <Link to="/list?city=65">列表页</Link>
  
  React编程式，不携带数据：<script> const navigate = useNavigate(); navigate('/index') </script>
  React编程式，携带params数据：<script> const navigate = useNavigate(); navigate('/detail/123') </script>
  React编程式，携带query数据：<script> const navigate = useNavigate(); navigate('/list?city=65') </script>

• 提问者 慕先生7102758 回复 西门老舅 #3

  非常感谢老师，我看路由的动态路由传参 是不是就等同于 路由的声明式params传参？

点开查看后面1条评论