命名视图 · 前端技术总结

命名视图可以用来代替frame框架，实现在指定view里展示内容。在多级导航下效果非常好。下面出示个简单demo ![](images/Video_2018-10-09_092115.gif) 完整代码 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.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;} .view-item:nth-of-type(2){border-color: blue;} .view-item:nth-of-type(3){border-color: orange;} </style> </head> <body> <div id="js_app"> <div class="router-link"> <router-link to="/foo">Foo</router-link> <router-link to="/bar">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_one</p> <router-view name="view_one"></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 = { template: '<strong>bar</strong>', beforeRouteEnter(to, from, next) { next(); } }; const routes = [ { path: '/', components: { default: Foo } }, { path: '/foo', components: { view_one: Foo } }, { path: '/bar', components: { view_two: Bar } } ]; const router = new VueRouter({ routes }); var app = new Vue({ router }).$mount('#js_app'); </script> </body> </html> ```