路由傳值
阿新 • • 發佈:2021-12-23
為對應的元件路徑新增name屬性
// 建立 VueRouter 物件 const router = new VueRouter({ // 編寫路由規則 routes: [ {path:'/',redirect:'/login'},//預設元件 redirect:重定向到指定元件 { path: "/login", component: loginform },//component:哪個元件,元件名 { path: "/register", component: regform }, { path:"/user",name:'userform', component: userform } //看我多了一個name屬性,要往哪個元件中傳值,就給哪個元件的路由上新增name屬性 ] })
在父元件的事件中過reouter.push方法將資料推送到子元件中
btnLogin(){//登入按鈕觸發的方法 //跳轉到使用者列表元件 //this.$router.push("/user"); //跳轉並傳參 params:要傳遞的引數 this.$router.push({name:'userform',params:{account:this.account,password:this.password}}) }
在子元件中接收資料
created(){ //接收路由中的引數 //this.$route.params.acc; this.account=this.$route.params.account; this.pwd=this.$route.params.password; }