vue路由5：命名视图

来源：爱够旅游网

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<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>

<script src="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

app.js:

var routes = [
    {
        path: '/',
        component: {
            template: `
                <div>首页</div>
            `
        }
    },{
        path: '/user',
        components: {
            sidebar: {
                template: `
                    <ul>
                        <li>用户列表</li>
                        <li>权限管理</li>
                    </ul>
                `
            },
            content: {
                template: `
                    <p>
                    耶鲁留学生的2000张自拍照
                    </p>
                `
            }
        }
    },{
        path: '/post',
        components: {
            sidebar: {
                template: `
                    <ul>
                        <li>帖子列表</li>
                        <li>标签管理</li>
                    </ul>
                `
            },
            content: {
                template: `
                    <p>
                    耶鲁留学生的2000张自拍照
                    </p>
                `
            }
        }
    }
];

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

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

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文