关于vue路由嵌套遇到的坑~

最新推荐文章于 2022-10-08 10:45:22 发布

adz41455

最新推荐文章于 2022-10-08 10:45:22 发布

阅读量247

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenqiangit/p/9798106.html

版权

关键在于子路由中的path问题，path之前不要放/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
    <script src="lib/vue-router.js"></script>

</head>
<body>
<div id="app">
    <router-link to="/login">登录</router-link>
    <router-view></router-view>
</div>
<template id="temp">
    <div>
        <h1>只是登录组件</h1>
        <router-link to="/login/male">男注册</router-link>
        <router-link to="/login/female">女注册</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    let login = {
        template: '#temp',
        data() {
            return {
                msg: '123'
            }
        }
    };

    let malereg = {
        template: `<h2>这是男人注册的组件</h2>`
    };
    let femalereg = {
        template: `<h2>这是nv人注册的组件</h2>`
    };
    let register = {
        template: `<h1>这是一个注册组件</h1>`,
        data() {
            return {
                msg: '123'
            }
        }
    };
    let router = new VueRouter({
        routes: [
            {
                path: '/login',
                component: login,
                children: [
                    {path: 'male', component: malereg},     // 这个path后面千万不要放 /
                    {path: 'female', component: femalereg}, 

                ]
            },
        ]
    });
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>
</body>
</html>

这篇文章写的有点随意，晚上少吃个鸡腿

转载于:https://www.cnblogs.com/wenqiangit/p/9798106.html

adz41455

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于vue路由嵌套遇到的坑~

关键在于子路由中的path问题，path之前不要放/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="lib/vue-2.4.0.js"&gt...
复制链接

扫一扫