Vue嵌套路由失效?


<!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>
    </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>

你都写错了哦 你看看这是可以是实现的

我只修改了home 组件 其他的都差不多 然后访问home组件就可以

<!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 {
            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">
    <div>
    <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>
    </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>
    </div>
    <div>
        <router-view></router-view>
    </div>
</template>
</body>
<script>
    var homeStr = document.querySelector('#home').innerHTML;
    console.log(homeStr);
    var Home = {
        template: homeStr
    };
    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>

访问 home/123



相关阅读:
php中static和abstractor有啥区别?
如何删除选中的cell中对应的行?
js弹窗验证失败
关于STUN协议中属性的一点问题
vuejs 折叠面板的展开收缩动画应该怎么实现?用vue自带的过渡效果还是css3?
关于表单页面提交信息的判断
extjs3.2 panel组件能否添加focus和blur事件
如何将全局变量i变成函数的局部变量?
vue应用嵌在微信里 ,点击微信右上角的分享其中一个页面的链接 ,怎样让用户点开来就是当前页面呢?
AngularJS路由添加controller问题
PC端API和移动端API有什么不同吗?
pycharm 如何配置 python3 的开发环境?
vue中通过this.$router.push 到当前页面,只是参数不同,页面没有重新请求数据?
vue.js2.0中set和get的问题
$.ajax 跨域 options
mysql 的IFNULL失效
webpack在安装的时候出现问题
使用websocket上传视频文件后无法播放
作用域链的问题?
angular.js高级程序设计书本开头配置环境出错,谁能给解答一下



快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 名人传读后感400字 岁月如歌,感念师恩 重返地球第51章探索神迹作文1000字 泛兰舟(谯天授画像) 四次创业 开县老板京城开起大酒楼 保密承诺书 《西游记》三打白骨精精彩片段 2016年初中数学研修总结 关于刑事附带民事起诉状的标准文书 伸伸手,伸出信赖作文700字 成功就是保持热情并拥有迎难而上的能力 小小的翅膀作文200字 美丽的如琴湖 浅谈学生质疑习惯的培养 免费《我的第一本书》同步练习1 从《铁齿铜牙纪晓岚》谈起作文900字 区委副书记述职述廉报告 即使成功只是那百分之一 交通运输部下半年工作部署会议讲话稿 建军节企业活动 药监局创建十佳文明单位事迹材料 参观焦裕禄精神展览心得体会 几年我那只被风吹去的袜子 游新天地公园 关于友情的唯美句子英文 我的百变巧克力作文600字 初秋细雨时 党课培训心得——创优争先 端午节的文章 端午节的感怀 6.26国际禁毒日宣传教育活动方案 梅花殇 绿色环保标语:校园环卫类 茶香作文150字 3.1.1方程的根与函数的零点 公开课教案 就这样幸福的长大 难以忘却的风景作文 小学六年级作文400字:风中等待 护理实习生鉴定 乌丢丢奇遇记的读后感 可爱的世博作文350字 爱.母爱 我的爱,已停留在三百年前 晨会激励话语 卓越是我的追求 这一世失约的温暖 母亲是佛 在家乡的春节_关于春节的小学生作文450字 秋日呓语(外一首) “惊魂”大扫除 小学五年级作文450字:拔牙齿 祝福你—男孩

Copyright © 2016 phpStudy |