首頁手記 Vue2.0路由學習探索總結---命名視圖

Vue2.0路由學習探索總結---命名視圖

標簽：

Vue.js

Vue2.0路由学习探索总结---命名视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../vue-router.js"></script>
    <style>
        .router-link-active {
            color: red
        }
    </style>
</head>
<body>
<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>
</body>
<script>
    const Foo = {template: '<div>foo</div>'}
    const Bar = {template: '<a>bar</a>'}
    const Baz = {template: '<h1>baz</h1>'}
   const router = new VueRouter({
        mode: 'history',
        routes: [
            {
                path: '/',
               components: {
                    default: Foo,
                    a: Bar,
                    b: Baz
                }
            },
            {
                path: '/other',
                components: {
                    default: Baz,
                    a: Bar,
                    b: Foo
                }
            }
        ]
    });

    //    new Vue({
    //        router,
    //        el: '#app'
    //    });
    const app = new Vue({
        router
    }).$mount('#app')

</script>
</html>

點擊查看更多內容