當前位置：首頁 > 前端技术 > vue >内容正文

vue

vueRouter-命名视图

發布時間：2025/3/20 vue 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 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-命名视图的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：【我的Android进阶之旅】Andro
下一篇： html5倒计时秒杀怎么做,vue 设