路由嵌套 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--开发环境-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
    <!--
       1、创建vue路由：为每一个组件分配一个url
       2、在网页上挖个坑，用对应的组件来填这个坑
    -->
    <router-view></router-view>
</div>

<!--创建登录组件的模板-->
<template id="loginTemplate">
    <div>
        <h1>登录</h1>
        <form>
            <p>帐号：<input type="text" v-model="account"></p>
            <p>密码：<input type="text" v-model="password"></p>
            <button type="button" @click="btnLogin">登录</button>
        </form>
    </div>
</template>

<!--注册组件-->
<template id="regTemplate">
    <div>
        <h1>注册</h1>
        <form>
            <p>帐号：<input type="text" v-model="account"></p>
            <p>密码：<input type="text" v-model="password"></p>
            <p>确认密码：<input type="text" v-model="zpassword"></p>
            <button type="button">注册</button>
        </form>
    </div>
</template>

<!--用户父组件-->
<template id="userTemplate">
    <!--要显示列表，添加  修改-->
    <router-view></router-view>
</template>

<!--列表-->
<template id="userItemTemplate">
    <div>
        <h1>用户列表组件</h1>
        <button type="button" @click="btnAdd()">添加</button>
        <button type="button" @click="btnUpdate()">修改</button>
        <button type="button" @click="btnLogin()">登录</button>

    </div>

</template>

<!--用户添加-->
<template id="userAddTemplate">
    <h1>用户添加组件</h1>
</template>

<!--用户修改-->
<template id="userUpdateTemplate">
    <h1>用户修改组件</h1>
</template>


<script>
    //登录子组件
    const loginform = {
        template: '#loginTemplate',
        data(){
            return{
                account:'',
                password:''
            }
        },methods:{
            btnLogin(){//登录按钮触发的方法
                  //跳转并传参
                this.$router.push("/user")
            }
        }
    }

    //登录子组件
    const regform = {
        template: '#regTemplate',
        data(){
            return{
                account:'',
                password:'',
                zpassword:''
            }
        },methods:{

        }
    }

    //用户主组件
    const userform = {
        template: '#userTemplate',
        data(){
            return{
                account:'', //接收登录组件给我的值
                pwd:'',
            }
        }
    }

    //用户列表组件
    const useritemform = {
        template: '#userItemTemplate',
        methods:{
            btnAdd(){
                this.$router.push("/useradd");
            }, btnUpdate(){
                this.$router.push("/userupdate");
            }, btnLogin(){
                this.$router.push("/login");
            }
        }
    }

    //用户添加组件
    const useraddiform = {
        template: '#userAddTemplate',
    }

    //修改组件
    const userupdateiform = {
        template: '#userUpdateTemplate',
    }

    // 创建 VueRouter 对象
    const router = new VueRouter({
        // 编写路由规则
        routes: [
            {path:'/',redirect:'/login'},//默认组件  redirect:重定向到指定组件
            { path: "/login", component: loginform },//component:哪个组件，组件名
            { path: "/register", component: regform },//注册组件
            { path: "/user",
                component: userform,
                children:[
                    {path:'/',redirect:'/useritem'},
                    { path: "/useritem", component: useritemform},
                    { path: "/useradd", component: useraddiform },
                    { path: "/userupdate", component: userupdateiform },
                ]
            }//用户主组件
        ]
    })

    new Vue({
        el: "#app",
        data() {
            return {

            }
        },router //注册路由对象
    })
</script>
</body>
</html>

 

posted @ 2021-12-23 09:32  搬砖丶  阅读(45)  评论(0)    收藏  举报