qinjianhuang 2017-01-04 10:50 采纳率: 0%
浏览 2465

Vue.js怎么嵌套后，页面渲染失败？求解答

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="node_modules/vue-router/dist/vue-router.js"></script>
    <style>
        .router-link-active {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li>
            <router-link to='/home'>主页</router-link>
        </li>
        <li>
            <router-link to='/news'>新闻</router-link>
        </li>
    </ul>
    <!--路由配置的组件将会渲染在这里-->
    <div>
        <router-view></router-view>
    </div>
</div>
<template id="home">
    <h3>我是主页</h3>
    <div>
        <ul>
            <li>
                <router-link to='/home/login'>登陆</router-link>
            </li>
            <li>
                <router-link to='/home/resgist'>注册</router-link>
            </li>
        </ul>
    </div>
    <h2>{{$route.params.id}}</h2>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="news">
    <div>
        <h3>我是新闻</h3>
        <ul>
            <li>
                <router-link to='/news/detail'>详细</router-link>
            </li>
        </ul>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="login">
    <div>
        <p>请登录</p>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="resgist">
    <div>
        <p>请注册</p>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
<template id="detail">
    <div>
        <!-- <h2>Details:{{$route.params.id}}</h2>-->
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
</body>
<script>
    var Home = {
        template: '#home'
    };
    var News = {
        template: '#news'
    };
    var Login = {
        template: '#login'
    }
    var Resgist = {
        template: '#resgist'
    }
    var Detail = {
        template: '#detail'
    }
    //创建router实例
    var router = new VueRouter({
        routes: [
            {
                path: '/home/:id', component: Home,
                children: [
                    {path: 'login', component: Login},
                    {path: 'resgist', component: Resgist}
                ]
            },
            {
                path: '/news/:id', component: News, children: [
                {path: 'detail', component: Detail}
            ]
            }
        ]
    });
    //创建和挂载根实例
    var app = new Vue({
        router: router
    }).$mount('#box');
</script>
</html>
  • 写回答

1条回答 默认 最新

  • qinjianhuang 博客专家认证 2017-01-05 01:36
    关注

    求回答啊，大神们！！！！

    评论

报告相同问题？

悬赏问题

  • ¥30 这是哪个作者做的宝宝起名网站
  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据，怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据，怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题！