专栏首页前端之攻略vueRouter-命名视图 原

vueRouter-命名视图 原

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

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue案例引发的「嵌套组件」通信的简单方式

    我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。

    六小登登
  • 基于CMS的组件复用实践

    目前前端项目大多基于Vue、React、Angular等框架来实现,这一类框架都有一个明显的特点:基于模块化以及组件化思维。所以,开发者在使用上述框架时,实际上...

    个推君
  • navigateTo:fail page "pages/goodsDetails/javascript:void(0);" is not found

    在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:

    honey缘木鱼
  • 个推前端微服务化:突破传统SPA瓶颈

    目前的前端领域,单页面应用(SPA)大行其道。而随着时间的推移以及应用功能的丰富,这些应用变得越来越庞大也越来越难以维护。于是“微前端”这一概念应运而生。

    个推君
  • mpvue页面跳转及传值

    vue中 使用 vue-router 来进行路由跳转的。mpvue中只能通过以下几种方式跳转: (1).a 标签

    honey缘木鱼
  • 解读mpvue官方文档的Class 与 Style 绑定及不支持语法

    在vue.js项目转化为小程序时,把原来页面的代码直接拷贝过去,发现布局改变很多,很多已经设置的标签的css样式并没有显示出来,查看官方文档,得知原来vue.j...

    honey缘木鱼
  • vue与react哪种好?

    vue与react,到目前为止两个我都用来写了好多项目,vue用的脚手架是vue-cli,react用的是dva,两者都对其进行了很好的封装,只需要简单的几步就...

    杭州前端工程师
  • WordPress 和 Vue.js 的学习资源推荐

    Vue 是一个非常有吸引力的构建前端的框架,它已迅速成为 React 和 Angular 等其他流行框架的替代品。它很敏捷速度很快,编写的代码容易阅读和理解,很...

    丘壑
  • 在WordPress中添加简书风格的连载目录和文章导航

    自从机缘巧合的开始翻译Gensis的系列教程,越来越沉迷于研究这款WordPress主题框架了,一边翻译一边学习一边也在自己的丘壑博客上实验。

    丘壑
  • 记一次vue长列表的内存性能分析和优化

    这个长列表页面,其实是一个实时日志上报的页面,随着页面打开时间的增加,日志数量也会增多,常规的页面布局和渲染免不了会遇到性能问题。

    书童小二

扫码关注云+社区

领取腾讯云代金券