Vue路由(vue-router)路由参数

Vue路由(vue-router)路由参数教程

Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.params 对象,来获取传递的参数。

Vue路由(vue-router)路由参数使用详解

语法

<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>

程序运行后,浏览器显示效果如下:

10 vue router param.png

首先,我们将需要传递的参数,直接放在请求的路由的 URL 后面。接着,我们在 VueRouter 对象的 path 属性里面,通过 : 的形式来设置传递的参数。

最后,我们在组件里面,直接可以通过 $route.params 对象,来获取传递的参数。

Vue路由(vue-router)路由参数总结

在 Vue 中,Vue 路由(vue-router) 可以通过请求的 URL 来传递参数。Vue 路由(vue-router)参数,我们可以直接在组件里面,通过 $route.params 对象,来获取传递的参数。