vueRouter-命名视图
vueRouter-命名视图
tianyawhl 发表于1个月前
vueRouter-命名视图
  • 发表于 1个月前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

有时候想同时展示多个视图,而不是嵌套展示,例如创建一个布局,有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>

 

共有 人打赏支持
粉丝 2
博文 150
码字总数 56306
×
tianyawhl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: