1. 程式人生 > 其它 >路由傳值

路由傳值

為對應的元件路徑新增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;
}