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
    关注

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

    评论

报告相同问题？

悬赏问题

  • ¥15 如何在scanpy上做差异基因和通路富集？
  • ¥20 关于#硬件工程#的问题，请各位专家解答！
  • ¥15 关于#matlab#的问题：期望的系统闭环传递函数为G(s)=wn^2/s^2+2¢wn+wn^2阻尼系数¢=0.707，使系统具有较小的超调量
  • ¥15 FLUENT如何实现在堆积颗粒的上表面加载高斯热源
  • ¥30 截图中的mathematics程序转换成matlab
  • ¥15 动力学代码报错，维度不匹配
  • ¥15 Power query添加列问题
  • ¥50 Kubernetes&Fission&Eleasticsearch
  • ¥15 報錯：Person is not mapped，如何解決？
  • ¥15 c++头文件不能识别CDialog