vue.js路由传递参数有两种方式
/login?id=2&name=段誉
, 用 $route.query.id
接收/register/1/乔峰
, 用 $route.params.id
接收效果如下:
路由参数传递.gif
<router-link to="/login?id=2&name=段誉" tag="button" class="btn btn-success">登录</router-link>
<router-link to="/register/1/乔峰" tag="button" class="btn btn-danger col-lg-offset-2">注册</router-link>
<template id="login">
<h3>登录 用户id:{{ $route.query.id }} 用户姓名:{{ $route.query.name }}</h3>
</template>
<template id="register">
<h3>注册 用户id:{{ $route.params.id }} 用户姓名:{{ $route.params.name }}</h3>
</template>
let router = new VueRouter({
routes: [
{ path: '/login', component: login },
{ path: '/register/:id/:name', component: register },
]
});
let vm = new Vue({
el: "#app",
data: {},
router
})
路由传参规则