Vue的路由传参

Vue传参的几种方式

方式一：使用query方式传参

1.在url后面用?的方式传入参数

 <router-link to='/login?id=10&name=alan'>登录</router-link>

2.调用时直接在组件模板中{{$route.query.id}}

template:'<h3>登录组件---{{$route.query.id}}---{{$route.query.name}}</h3>'

 

方式二：使用params方式传参

1.在路由规则的path后面加上  :id,多个参数用/隔开

 var routerobj = new VueRouter({
        routes:[
            {path:'/login/:id/:name',component:login},
            {path:'/register',component:register},
        ]
 })

2.在url跳转的路径后按顺序加上参数值

 <router-link to='/login/12/Alan'>登录</router-link>

3. 调用时直接在组件模板中{{$route.params.id}}

template:'<h3>登录组件---{{$route.params.id}}---{{$route.params.name}}</h3>'