vue路由5:命名视图

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/user">用户管理</router-link>
        <router-link to="/post">帖子管理</router-link>
    </div>
    <div>
        <router-view name="sidebar"></router-view>
        <router-view name="content"></router-view>
    </div>
</div>
var routes = [
    {
        path: '/',
        component: {
            template: `
                <div>首页</div>
            `
        }
    },{
        path: '/user',
        components: {
            sidebar: {
                template: `
                    <ul>
                        <li>用户列表</li>
                        <li>权限管理</li>
                    </ul>
                `
            },
            content: {
                template: `
                    <p>
                    核心技术是国之重器!建设网络强国习主席提出新要求
                    </p>
                `
            }
        }
    },{
        path: '/post',
        components: {
            sidebar: {
                template: `
                    <ul>
                        <li>帖子列表</li>
                        <li>标签管理</li>
                    </ul>
                `
            },
            content: {
                template: `
                    <p>
                    核心技术是国之重器!建设网络强国习主席提出新要求
                    </p>
                `
            }
        }
    }
];

var router = new VueRouter({
    routes: routes
});

var app = new Vue({
    el: '#app',
    router: router
})

猜你喜欢

转载自www.cnblogs.com/samve/p/9125805.html