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高级程序设计书本开头配置环境出错,谁能给解答一下



快速导航

Copyright © 2016 phpStudy |