日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 >

vueRouter-命名视图

發布時間：2025/3/20 42 豆豆
生活随笔 收集整理的這篇文章主要介紹了 vueRouter-命名视图 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2019獨角獸企業重金招聘Python工程師標準>>>

有時候想同時展示多個視圖，而不是嵌套展示，例如創建一個布局，有sidebar(側導航)和（主內容）2個視圖，這個時候命名視圖就派上用場了。
你可以在界面中擁有多個單獨命名的視圖，而不是只有一個單獨的出口，如果router-view沒有設置名字，那么就默認為default
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
一個視圖使用一個組件渲染，因此對于同個路由，多個視圖就需要多個組件，確保正確使用components

<body class=""><script src="../js/vue.js"></script><script src="../js/vue-router.js"></script><div id="app"><h1>Named Views</h1><ul><li><router-link to="/">/</router-link></li><li><router-link to="/other">other</router-link></li></ul><router-view class="view one"></router-view><router-view class="view two" name="a"></router-view><router-view class="view three" name="b"></router-view></div><script>const Foo = { template: `<div>foo</div>` }const Bar = { template: `<div>bar</div>` }const Baz = { template: `<div>baz</div>` }const router = new VueRouter({//mode:"history",routes: [{path: "/",components: {default: Foo,a: Bar,b: Baz}},{path: "/other",components: {default: Baz,a: Bar,b: Foo}}]})const app = new Vue({ router }).$mount("#app")</script> </body>

?

轉載于:https://my.oschina.net/u/2612473/blog/1535681

總結

以上是生活随笔為你收集整理的vueRouter-命名视图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。