问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Vue嵌套路由失效？

头像
有故事
    409917
    <!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>
    vue.jsvue-router
    阅读 6.2k
    1 个回答
    得票最新
    头像
    naice
      2k22239

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

      我只修改了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

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题