路由传值

为对应的组件路径添加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;
}