在 Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.params 对象,来获取传递的参数。
<body>
<div id="app">
<router-link to="/login/12/haicoder">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script type="text/javascript">
var login = {
template: '<h1>登录组件 -- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
created(){ //组件的生命周期钩子函数
console.log(this.$route.params.id);
// console.log(this.$route);
}
}
var routerObj = new VueRouter({
routes: [
{path: "/", redirect: '/login'},
{path: "/login/:id/:name", component: login},
{path: "/register", component: register}
]
})
</script>
首先,我们将需要传递的参数,直接放在请求的路由的 URL 后面。接着,我们在 VueRouter 对象的 path 属性里面,通过 : 的形式来设置传递的参数。
最后,我们在组件里面,直接可以通过 $route.params 对象,来获取传递的参数。
使用 URL 实现路由传参,通过 $route.params 对象,来获取传递的参数
<!DOCTYPE html>
<html>
<head>
<title>Vue路由(vue-router)传参</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/login/12/haicoder">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
<p>嗨客网(www.haicoder.net)</p>
</body>
<script type="text/javascript">
var login = {
template: '<h1>登录组件 -- {{ $route.params.id }} --- {{ $route.params.name }}</h1>',
created(){ //组件的生命周期钩子函数
console.log(this.$route.params.id);
// console.log(this.$route);
}
}
var register = {
template: '<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes: [
{path: "/", redirect: '/login'},
{path: "/login/:id/:name", component: login},
{path: "/register", component: register}
]
})
var vm = new Vue({
el : '#app',
data:{
msg: "嗨客网"
},
router: routerObj
});
</script>
</html>
程序运行后,浏览器显示效果如下:
首先,我们将需要传递的参数,直接放在请求的路由的 URL 后面。接着,我们在 VueRouter 对象的 path 属性里面,通过 : 的形式来设置传递的参数。
最后,我们在组件里面,直接可以通过 $route.params 对象,来获取传递的参数。
在 Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.params 对象,来获取传递的参数。