有时候想同时展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar（侧导航）和main（主内容）两个视图。这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TEST-VUE案例</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> </head> <body> <div id="app"> <ul> <li> <router-link to="/user/foo"> Go to Foo </router-link> </li> <li> <router-link to="/user/bar"> Go to Bar </router-link> </li> </ul> <router-view></router-view> <router-view name="a"></router-view> </div> <script> // const User = { // template: '<div>User {{ this.$route.params.id }}</div>', // watch: { // '$route'(to, from) { // console.log(to, from) // } // } // } const Foo = { template: '<div>Foo {{ this.$route.params.id }}</div>' } const Bar = { template: '<div>Bar</div>' } const router = new VueRouter({ routes: [ { path: '/user/:id', components: { default: Foo, a: Bar }} ] }) const app = new Vue({ router: router }).$mount('#app') </script> </body> </html>
