路由传参方式与遇到的问题

路由有两种传统的传参方式，就是显示传参和隐式传参。

一、显示传参

路径会显示在地址栏里面

http://127.0.0.1:5173/#/details?name=111

在传递页中

首先导入路由

import {useRouter} from 'vue-router'
const router = useRouter()

 waidetailsting为你要传递的组件路由名称，name为要传递的数据名，例子为简单的数字类型，也可传递复杂的数据类型。

router.push({name:'waidetailsting',query:{name:111}})

 在接收页中，同样先导入路由

import {useRoute} from 'vue-router'
const route = useRoute()

最后可以定义一个变量来接收和使用传过来的数据

const re=route.query.name

二、隐式传参

就是传递的数据不会显示在地址栏

步骤和以上的差不多，就不多写了。用params方法隐式传参

import {useRouter} from 'vue-router'
const router = useRouter()

router.push({path:'/details',params:{name:111}})

path为你要传递的组件路由路径，可以使用name。

接收页同样也差不多，只是换成params.

import {useRoute} from 'vue-router'
const route = useRoute()

const re=route.params.name

三、遇到的问题

这两中方式是可以实现路由传参的，但不知道为什么我用了都不行，要不是路由找不到，就是路由跳转过去了但是拿不到数据。要么是报别的错。

搞了很久，原来是我刚开始传递的方式就错了，可能是我的数据比较复杂，是数组对象类型的。

const topstorylist = ref ([
    {
        img:'/src/assets/image/pic5.png',
        name:'喵先生',
        title:'我破防都说了管家婆额外加个急麻婆金MVhi宾部',
        articleitem:'请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍请之旅吧，那叫一个坎坷呀，可以拍',
        id:1,
        favour:88,
        like:false,
    },
    {
        img:'/src/assets/image/pic6.jpg',
        name:'名字111',
        title:'这是标题二',
        articleitem:'什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积',
        id:2,
        favour:22,
        like:false,
    },
    {
        img:'/src/assets/image/pic7.jpg',
        name:'名字111',
        title:'这是标题三',
        articleitem:'这是标题三什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积什么许多人买房子用商业贷款而不是公积',
        id:3,
        favour:2,
        like:false,
    },
])

用了这种方式就能传递过去，并且能拿到数据了。传递的name方式是不能改为path方式的，不然也会出错。state是因为传递的数据都会放在state里面。

import {useRouter} from 'vue-router'
const router = useRouter()

function goDetails(item) {
    let items = JSON.stringify(item);
    router.push({name:'waidetailsting',state:{name:items}})
}


<template>
<ul>
    <li v-for="v in topstorylist" :key="v.id">
      <div @click="goDetails(v)">
         .....
       </div>
.....
</template>

因为是对象类型，所以要用JSON.stringify(item)方法将对象转换为JSON字符串才能传递过去

在接收页中就能拿到数据并使用了。但要先用JSON.parse(result)方法将JSON字符串转换为对象类型才能使用里面的数据。

import {useRoute} from 'vue-router'
const route = useRoute()
var result = history.state.name

const res=JSON.parse(result)


<template>
    <div>
        <h1>{{ res.title }}</h1>
        {{ res.name }}
         <p>{{ res.articleitem }}</p>
    </div>
</template>