url参数映射到prop · 前端技术总结

把参数映射到props里，然后在components显示，这是一种实现参数响应的方案。。 ## 一、简单示例 ![](images/screenshot_1539078657300.png) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue/vue.min.js"></script> <script src="js/vue/vue-router.min.js"></script> <style type="text/css"> .router-link{margin: 10px;} .view-box{display: flex;} .view-item{flex: 1;padding: 20px;border-style: solid;border-width: 1px;margin: 0 10px;} .view-item:nth-of-type(1){border-color: red;} </style> </head> <body> <div id="js_app"> <div class="router-link"> <router-link to="/foo">Foo</router-link> </div> <div class="view-box"> <div class="view-item"> <p>默认视图</p> <router-view></router-view> </div> </div> </div> <script type="text/javascript"> const Foo = { props: ['name'], template: '<strong>{{ name }}</strong>' }; const routes = [ { path: '/:name', component: Foo, props: true } ]; const router = new VueRouter({ routes }); var app = new Vue({ router }).$mount('#js_app'); </script> </body> </html> ``` ## 二、在命名视图中使用 > 指定props在哪个view下有效 ![](images/screenshot_1539078836247.png) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue/vue.min.js"></script> <script src="js/vue/vue-router.min.js"></script> <style type="text/css"> .router-link{margin: 10px;} .view-box{display: flex;} .view-item{width: 200px;padding: 20px;border-style: solid;border-width: 1px;margin: 0 10px;} .view-item:nth-of-type(1){border-color: red;} .view-item:nth-of-type(2){border-color: blue;} </style> </head> <body> <div id="js_app"> <div class="router-link"> <router-link to="/">Foo</router-link> <router-link to="/bar/12">Bar</router-link> </div> <div class="view-box"> <div class="view-item"> <p>默认视图</p> <router-view></router-view> </div> <div class="view-item"> <p>view_two</p> <router-view name="view_two"></router-view> </div> </div> </div> <script type="text/javascript"> const Foo = { template: '<strong>foo</strong>' }; const Bar = { props: ['id'], template: '<strong>bar {{ id }}</strong>' }; const routes = [ { path: '/', component: Foo }, { path: '/bar/:id', components: { view_two: Bar }, props: { view_two: true } } ]; const router = new VueRouter({ routes }); var app = new Vue({ router }).$mount('#js_app'); </script> </body> </html> ``` ## 三、函数方式 > 通过函数动态获取参数 ![](images/screenshot_1539080914678.png) ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue/vue.min.js"></script> <script src="js/vue/vue-router.min.js"></script> <style type="text/css"> .router-link{margin: 10px;} .view-box{display: flex;} .view-item{width: 200px;padding: 20px;border-style: solid;border-width: 1px;margin: 0 10px;} .view-item:nth-of-type(1){border-color: red;} .view-item:nth-of-type(2){border-color: blue;} </style> </head> <body> <div id="js_app"> <div class="router-link"> <router-link to="/foo">Foo</router-link> </div> <div class="view-box"> <div class="view-item"> <p>默认视图</p> <router-view></router-view> </div> </div> </div> <script type="text/javascript"> const Foo = { props: ['name'], template: '<strong>{{ name }}</strong>' }; const routes = [ { path: '/:name', component: Foo, props: (route)=>{ return {name: route.params.name}; } } ]; const router = new VueRouter({ routes }); var app = new Vue({ router }).$mount('#js_app'); </script> </body> </html> ```