vue路由--命名视图

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

<!DOCTYPE html>
<!-- saved from url=(0077)https://keepfool.github.io/vue-tutorials/06.Router/basic/basic_01.html#!/home -->
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>abc</title>
</head>
<body>
    <div >
        <div class="list-group">
            <router-link class="list-group-item" to="/home">Go to Foo</router-link>
            <router-link class="list-group-item" to="/about">Go to Bar</router-link>
        </div>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    </div>
    <template >
        <div>
            <h1>Home</h1>
            <p>a</p>
        </div>
    </template>
    <template >
        <div>
            <h1>Home</h1>
            <p>b</p>
        </div>
    </template>
    <template >
        <div>
            <h1>About</h1>
            <p>a</p>
        </div>
    </template>
    <template >
        <div>
            <h1>About</h1>
            <p>b</p>
        </div>
    </template>
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <script>
    homea = { template: '#homea' };
    homeb = { template: '#homeb' };
    abouta = { template: '#abouta' };
    aboutb = { template: '#aboutb' };
    // About = { template: '<div>bar</div>' }
    routes = [{
            path: '/home',
            components: {
                a: homea,
                b: homeb
            }
        },
        {
            path: '/about',
            components: {
                 a: abouta,
                 b: aboutb
            }
        }
    ]
    router = new VueRouter({
        routes: routes // （缩写）相当于 routes: routes
    });
    app = new Vue({
        router: router
    }).$mount('#app');
    </script>
</body>
</html>

 注意这样写时不支持的：

{
            path: '/about',
            components: {
                 a: "#abouta",
                 b: "#aboutb"--不能在这里直接用id
            }
        }

以上是 vue路由--命名视图 的全部内容， 来源链接： utcz.com/z/378342.html

回到顶部