[TOC] >[success] # 获取路由参数 ~~~ 1.'$route'一个路由对象 (route object) 表示当前激活的路由的状态信息,包含了当前 URL 解析得到的信息, 还有 URL 匹配到的路由记录,简单的说包含'当前路由规则,路径,参数' 2.如图此时的'$route'包含当前所在路由的信息 2.1.利用'$route.query'属性获取连接上的参数,url参数使用?形式 2.2.利用'$route.params' 获取参数,url形式是/参数的形式 ~~~ * $route 参数说明 ![](https://img.kancloud.cn/d7/b5/d7b55a16e5592d26caa5478172c77e46_264x164.png) >[info] ## 使用$route ~~~ 1.'$router' 作为'VueRouter'实例对象可以用它提供的方法进行一些路由跳转方面的操作 2.'$route' 可以获取'当前路由规则,路径,参数' ~~~ >[danger] ##### 第一种利用 -- $route.query 获取 ~~~ <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 --> <router-link to="/login?id=10&name=zs">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <script> var login = { template: '<h1>登录 --- {{ $route.query.id }} --- {{ $route.query.name }}</h1>', data(){ return { msg: '123' } }, created(){ // 组件的生命周期钩子函数 // console.log(this.$route) // console.log(this.$route.query.id) } } var register = { template: '<h1>注册</h1>' } var router = new VueRouter({ routes: [ { path: '/login', component: login }, { path: '/register', component: register } ] }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, // router: router router }); </script> </body> </html> ~~~ >[danger] 第二种 --- $route.params ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <!-- 如果在路由中,使用 查询字符串,给路由传递参数,则 不需要修改 路由规则的 path 属性 --> <router-link to="/login/12/ls">登录</router-link> <router-link to="/register">注册</router-link> <router-view></router-view> </div> <script> var login = { template: '<h1>登录 --- {{ $route.params.id }} --- {{ $route.params.name }}</h1>', data(){ return { msg: '123' } }, created(){ // 组件的生命周期钩子函数 console.log(this.$route.params.id) } } var register = { template: '<h1>注册</h1>' } var router = new VueRouter({ routes: [ { path: '/login/:id/:name', component: login }, { path: '/register', component: register } ] }) // 创建 Vue 实例,得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: {}, // router: router router }); </script> </body> </html> ~~~ >[info] ## 文档推荐使用方法 ~~~ 1.文档推荐使用 props 将组件和路由解耦,上面的方法虽然简单粗暴,但是 对'$route' 有着依赖我们如何可以将下面这种代码变得更加直观: const User = { template: '<div>User {{ $route.params.id }}</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', component: User } ] }); 2.我们注意到这种动态路由如果想在视图组件中获取到动态值,我们需要 '$route'的加持,下面使用官方推荐的'props' 来实现同一段代码逻辑 ~~~ >[danger] ##### 使用props实现动态路由参数页面获取 ~~~ 1.在视图组件中创建'props' 用来接受路由中的动态参数 2.在路由中开启'props' 属性并且设置为true 3.如果 props 被设置为 true,route.params 将会被设置为组件属性。 4.下面案例中动态参数,已经在'props' 中在视图组件中可以直接使用 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to='/app/123'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app/:name", component:sapp,props:true}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### 视图组件动态路由解绑写法 ~~~ 1.根据视图名称对应开启是否使用'props' ~~~ ~~~ // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项: { path: '/user/:id', components: { default: User, sidebar: Sidebar }, props: { default: true, sidebar: false } } ] }) ~~~ >[danger] ##### 不是动态路由缺想传递一个固定的静态值 ~~~ 1.有时候,路由虽然不是动态的,但我们想传递一个关键的静态值,可以使 用下面案例的方法 2.在路由的'props' 中定义一个对象,然后将对象的key 和视图组件的'props' 进行绑定 。在视图组件中就可以接受到响应的参数信息 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to='/app'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app", component:sapp,props:{name:"123"}}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~ >[danger] ##### '?' 传参的时候获取 ~~~ 1.上面讲了动态路由的情况,还有一种情况当我们使用?传递参数的时候应 该如何去获取,官方提供了一种叫'函数模式' 2.不要被下面案例迷惑,函数模式相当于可以获取'route'参数中任意内容, 给到视图组件,这里只是用'?'这种做了一个例子 ~~~ ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <router-link to='/app?name="sss"'>sapp</router-link> <router-view></router-view> </div> <template id="sapp"> <div> {{name}} </div> </template> <script type="text/javascript"> const sapp = { props:['name'], template:'#sapp', }; const routes=[ {path:"/app", component:sapp,props: (route) => ({ name: route.query.name })}, ]; const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }); var vm = new Vue({ el: "#app", router, }) </script> </body> </html> ~~~