9. Vue 路由的命名视图

Vue 路由的命名视图

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

<div id="app">
  <button @click="pageFirst">Page First</button>
  <button @click="pageSecond">Page Second</button>
  <router-view></router-view>
</div> 

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

const First = { template: '<div>First Page</div>' } //调用路由name属性
const Second = { template:`
  <div>
    Second Page
    <router-view name="com1"></router-view>
    <router-view name="com2"></router-view>
  </div>   
`}
const Com1 = { template: "<div>this is com1</div>"}
const Com2 = { template: "<div>this is com2</div>"}
routes = [
  { path: '/first', name: "first", component: First },  //设置路由name属性
  { path: "/second", component: Second, children: [{
    path: '', name: "second", components: {
      com1: Com1,
      com2: Com2
    }
  }]}
]
router = new VueRouter({
  routes
})
const app = new Vue({
  router,
  methods: {
    pageFirst(){ router.push('/first') },
    pageSecond(){ router.push({ name: 'second' }) },
  },
}).$mount('#app')