Vue3 動態路由和參數傳遞

 

 

 

　　User  父組件

　　MyPage 子組件

params類型（單個，動態路由）

　　在父組件里使用MyPage子路由的路徑

　　直接傳值

　　

 

 

 　　或添加動態數據傳值

　　:to=" '/父路由/path的子路徑名字/'+動態值'"

　　

 

 

 

 

 

 　　注：page是子路由里MyPage使用的路徑名字page

　　再到路由里引用子組件路徑

　　  

　　

 

 

 　　page/:隨便取名字

　　其后在子組件里取值

　　$route 代表當前路由

　　params 參數

　　$router 可以往路由放參數

　　

 

 

 　　或在計算屬性的方式獲取

computed: {
            pageid:{
                    get(){
                        return this.$route.params.id
                    }
            }
},//也可以省略get直接寫默認有get
computed: {
            pageid(){
                        return this.$route.params.id
            }
},

 

 

 

 

 

 

 

 父組件 User

子組件 MyArticle

query類型（多個）

　　這種方式不用配置路由，正常引入子組件路徑

　　

 

 

 　　在父組件里寫入

　　

 

 

 　　可以直接傳也可動態傳入

　　:to="{path:'/path父路由名/path子路由名',query:{要傳入的值名稱:要傳入的動態值}}"

　　接收值

　　

<template>
    <div class=''>
        Article....................
        <br> 
　　　　$route 當前路由
　　　　query  父傳入子路由值的query（參數）
　　　　
        name:{{$route.query.name}}
        <br>
        age:{{$route.query.age}}
    </div>
</template>

 

 

 

 　　如果用按扭的方法點擊傳值也是一樣

　　

 

 　　用路由傳值方式，添加傳給article，也可以用對象格式