Vue2.0路由学习探索总结---命名视图-原创手记-慕课网

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

resharpe 2016-12-10 10:48:24 浏览 4005

resharpe

关注TA

手记 102

粉丝 7244

获赞 3476

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <script src="../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>

相关标签: Vue.js

3人推荐

发表评论