💡vue路由基础进阶-----路由的参数传递🙌

狂炫一碗大米饭
477 阅读4分钟

前言🐍

了解完如何配置router之后，接下来我们来看看路由传参的方法！

很好，继续说GIF.gif

利用Query路由传参

在 Vue Router 中，利用Query来查询参数是利用URL上的键值来传递参数的。

实现思路：

1.利用router.push()方法中的Query参数查询可以将参数暴露在URL上

2.将数据传递给query

3.再利用useRoute() 来访问当前的路由信息，使用query来读取URL上的信息。 案例：

  1. 创建了一个home.json文件来存储数据
{
    "date": [
      {
        "name": "路由如何传参",
        "Author": "狂炫一碗大米饭",
        "Article": "https://juejin.cn/editor/drafts/7461656087110795274"
      },
      {
        "name": "如何配置路由",
        "Author": "狂炫一碗大米饭",
        "Article": "https://juejin.cn/editor/drafts/7455954179414147083"
      }
    ]
  }
  1. 将date从home.json中解构出来，然后将date传给router.push()中的query将数据暴露给URL
<template>
    <div class='home'>
        Home  
     梦开始的地方
    </div>
    <div>
     <img src="https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59901f75169541d69bf4a514a12235ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54uC54Kr5LiA56KX5aSn57Gz6aWt:q75.awebp?rk3s=f64ab15b&x-expires=1772018333&x-signature=2m0saZgrVL4gNin3oBQPwP%2B%2FINo%3D" class='img'>
    <table cell="0" class="table" border="1">
        <thead>
            <tr>
                <th>文章名称</th>
                <th>作者</th>
                <th>详情</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in date" :key="item.name"> //遍历date对象，将每次遍历的结果赋值给item
                <td>{{ item.name }}</td>
                <td>{{ item.Author }}</td>
                <td>
                    <button @click="To(item)">点击跳转</button>
                    
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</template>

<script setup="ts">
   import {date} from '../homes/home.json'
   import {useRouter} from 'vue-router'
   const router = useRouter()
 const To =(item) =>{
    router.push({
        path:'/Login',
        query:item       //将item传给query
    })
 }
</script>

<style scoped>
.home{
    font-size: 50px;
    color: red;
}
</style>

image.png

  1. 在详情页面组件中获取路由信息
<template>
    <div>
     <div>
        文章名：{{route.query.name}} </div>
    
     <div>
        作者：{{ route.query.Author }}</div>
     
     <div>
        详情链接：{{ route.query.Article }} </div>
    
    </div>
</template>

<script setup>
import {useRoute} from 'vue-router'
const route=useRoute()

</script>

<style  scoped>

</style>

video.gif

💡注意：query只能接收一个对象。

利用params传递

params 是 router.push() 方法上提供的一个选项，用于传递路径参数的，也就是URL的动态部分 和query的思路一样，也是将数据传给params，但不同的是query是将数据暴露在URL上，而params这是将数据储存在后台内存之中，最后在利用useroute()方法读取路由信息。

案例：

<template>
    <div class='home'>
        Home  
     梦开始的地方
    </div>
    <div>
     <img src="https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/59901f75169541d69bf4a514a12235ec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg54uC54Kr5LiA56KX5aSn57Gz6aWt:q75.awebp?rk3s=f64ab15b&x-expires=1772018333&x-signature=2m0saZgrVL4gNin3oBQPwP%2B%2FINo%3D" class='img'>
    <table cell="0" class="table" border="1">
        <thead>
            <tr>
                <th>文章名称</th>
                <th>作者</th>
                <th>详情</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in date" :key="item.name"> //遍历date对象，将每次遍历的结果赋值给item
                <td>{{ item.name }}</td>
                <td>{{ item.Author }}</td>
                <td>
                    <button @click="To(item)">点击跳转</button>
                    
                </td>
            </tr>
        </tbody>
    </table>
    </div>
</template>

<script setup="ts">
   import {date} from '../homes/home.json'
   import {useRouter} from 'vue-router'
   const router = useRouter()
 const To =(item) =>{
    router.push({
       name:'login',
        params:item       //将item传给query
    })
 }
</script>

<style scoped>
.home{
    font-size: 50px;
    color: red;
}
</style>

💡注意：使用params时router.push()中只能通过name属性进行跳转。

虽然使用params成功了，但其数据存在于后台内存中，当页面刷新之后其数据会丢失。

那有没有其他方法呢？

结合动态路由参数来实现

思路

  1. 在路径上定义一个值。
  2. 利用params来获取动态路由参数。
  3. 在所需要传入数据的页面组件中引入数据，在通过查找特定数据项来找到其他对应信息。

案例：

  1. 在路径上添加值name
{
       path: '/login/:name',
       name: 'login',
       component: Login

      },
  1. 利用params来获取动态路由参数
const To =(item) =>{
    router.push({
        name:'login',
        params: item
    })
 }

3. 使用date.find查找其他对应信息

<template>
    <div>
        <div>文章名：{{ item.name }}</div>
    <div>作者：{{ item.Author }}</div>
    <div>详情链接： {{ item.Article }}</div>
    </div>
</template>

<script setup>
import {date} from '../../homes/home.json'
import {useRoute} from 'vue-router'
const route=useRoute()
const item=date.find(item=>item.name==route.params.name)
</script>

<style  scoped>

</style>

结果：

image.png

使用state

利用 state 传参可以在路由跳转时不暴露参数到 URL 中。

思路

  1. 使用 router.push() 进行路由跳转时，将需要传递的数据放在 state 属性中。
  2. 在目标组件中通过 useRoute() 获取当前路由对象，然后从 route.state 获取传递的数据。

代码：

<script setup>
import { useRoute } from 'vue-router'; // 获取当前路由信息 
const route = useRoute(); // 从 route.state 中获取传递的数据
const article = route.state || {};
</script>

或者你也可以通过使用 window.history.state

window.history.state 是浏览器原生的历史记录 API，它在页面导航时会包含一些状态信息。当你通过 router.push() 跳转时，Vue Router 会将 state 数据写入到浏览器的历史记录中。因此，window.history.state 可以获取到这些数据。

watch(
    () => route.fullPath, //
    () => {
        const historyState = window.history.state;
      if (historyState && historyState.name) {
        article.value = historyState;
      } else {
        article.value = null; // 或者设置为默认值
      }
    },
    { immediate: true } // 立即执行一次以初始化
  );

例如我这里通过watch 监听 route.fullPath，当路由跳转后浏览器历史记录状态会同步更新。

window.history.state和route.state的区别：

window.history.state：当通过 router.push() 跳转时，Vue Router 会将 state 数据写入到浏览器的历史记录中，而route.state它在页面加载时并不会立刻可用，通常需要等到路由渲染完成后才能访问到。

总结

query:查询字符串参数，通常将参数附加到URL的？号后面，优点是可选查询多个参数，缺点是会将数据暴露在URL上。 params:获取动态路由参数，在路径中的动态部分绑定数据参数属性来实现传递参数。 state:用来传递不显示在 URL 上的数据,通常用于当前页面和要跳转的页面之间使用。

avatar
文章
阅读
粉丝