發(fā)送數(shù)據(jù)頁(yè)面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
接收數(shù)據(jù)頁(yè)面A:
val:JSON.parse(this.$route.params.val)
這時(shí)刷新頁(yè)面A，val就會(huì)報(bào)錯(cuò)undefined

//發(fā)送數(shù)據(jù)頁(yè)面Q:
this.$router.push({name:'A',query:{val:JSON.stringify(val)}})
//接收數(shù)據(jù)頁(yè)面A:
val:JSON.parse(this.$route.query.val)
//頁(yè)面A地址:xxx/A?val=xxxxxxxxxxxxxx
//這時(shí)刷新頁(yè)面A，數(shù)據(jù)正常存在,但是頁(yè)面地址會(huì)變得很長(zhǎng)，而且傳遞的數(shù)據(jù)也會(huì)暴露在外面。

發(fā)送數(shù)據(jù)頁(yè)面Q:
this.$router.push({name:'A',params:{val:JSON.stringify(val)}})
接收數(shù)據(jù)頁(yè)面A:
val:this.$route.params.val==undefined?undefined:(JSON.parse(this.$route.params.val) || JSON.parse(sessionStorage.getItem('musicList')))
//params.val是否等于undefined?若為true則val賦值為undefined,若為false則利用短路運(yùn)算符，若存在this.$route.params.val 則賦值給 val,若不存在則從sessionStorage里找數(shù)據(jù)賦值給val
//雖然瀏覽器刷新不會(huì)觸發(fā)destory,但是會(huì)每次觸發(fā)created。
created(){
//若條件為false則表示沒存儲(chǔ)過(guò)該數(shù)據(jù)。是第一次進(jìn)入該頁(yè)面。那么就把數(shù)據(jù)存入本地。
if(Boolean(sessionStorage.getItem('musicList')) == false) {
// 數(shù)據(jù)儲(chǔ)存在本地存儲(chǔ)里
sessionStorage.setItem('musicList', JSON.stringify(this.Id))
}
//若val==undefined則表示，該頁(yè)面刷新過(guò)了。params數(shù)據(jù)沒了。那么就從本地找出數(shù)據(jù)再賦值給val
if(this.val==undefined){
this.val= JSON.parse(sessionStorage.getItem('musicList'))
}
}
//當(dāng)正常的從這個(gè)頁(yè)面跳轉(zhuǎn)到其他頁(yè)面的時(shí)候會(huì)觸發(fā)該函數(shù)，切到其他頁(yè)面的時(shí)候就把該數(shù)據(jù)從本地存儲(chǔ)刪掉即可
beforeDestory(){
    sessionStorage.removeItem('musicList')
}

const routes = [
 {
   path: '/user/:id',
   component: User,
   props: true
 }
]
// User.vue
<script setup>
defineProps({ id: String })
</script>
<template>
 <div>User {{ id }}</div>
</template>

const routes = [
 {
   path: '/promotion',
   component: Promotion,
   props: { newsletterPopup: false }
 }
]

const routes = [
 {
   path: '/search',
   component: SearchUser,
   props: route => ({ query: route.query.q })
 }
]

//例如訪問(wèn) /search?q=vue 會(huì)傳入 { query: 'vue' }。

const routes = [
 {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
 }
]

{
    name:'Detail',
    path:'detail/:id',
    component:Detail,
 
    // 第一種寫法：props值為對(duì)象
    // 該對(duì)象中所有的key-value的組合最終都會(huì)通過(guò)props傳給Detail組件
    // 這種方法有一些局限性，那就是傳遞的都是死數(shù)據(jù)。所以這種放使用的非常少。
    // props:{a:900}
 
    //第二種寫法：props值為布爾值，布爾值為true
    //則把路由收到的所有params參數(shù)通過(guò)props傳給Detail組件
    // 這個(gè)方法的局限性也很明顯，那就是只能接收到所有的params參數(shù)。你要是用query參數(shù)傳過(guò)來(lái)的，那就使用不了
    // props:true
    
    //第三種寫法：props值為函數(shù)，
    // 該函數(shù)返回的對(duì)象中每一組key-value都會(huì)通過(guò)props傳給Detail組件
    
    //props值為函數(shù)
    //  這個(gè)函數(shù)有一個(gè)特點(diǎn)：它可以從形參列表中拿到$route對(duì)象，有了$route對(duì)象,那我們基本上就可以上天下地?zé)o所不能。
    
    props(route){
        return {
            id:route.query.id,
            title:route.query.title
        }
    }
    // 使用解構(gòu)賦值的連續(xù)寫法
    /*
    props({query:{id,title}}){
        return {id,title}
    }
    */
}