26-router中嵌套路由的使用

1、创建父路由
2、创建子路由

3、添加到父路由中

4、在父亲的template中添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <router-link :to="{name:'Users'}">用户列表</router-link>
        <router-view></router-view>
    </div>
</body>
</html>

<template id="users">
    <div>
        <h3>用户列表</h3>
        <hr>
        <a href="#/users/useradd">添加用户信息</a>
        <table border="1">
            <tr>
                <th>id</th>
                <th>name</th>
                <th>age</th>
                <th>salary</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.salary}}</td>
                <td><a href="#">删除</a>&nbsp;&nbsp;&nbsp;<router-link :to="{name:'useredit', query:{id:user.id, name: user.name, age:user.age, salary: user.salary}}">修改</router-link></td>
            </tr>
        </table>
        <!--展示子路由组件标签-->
        <router-view></router-view>
    </div>
</template>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--路由cdn-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js "></script>
<script>
    //users组件
    const users = {
        template:`#users`,
        data(){
            return{
                users:[]
            }
        },
        created(){
            //模拟发送axios从后端拿到数据
            this.users = [{id:1, name:'xiaochen', age:23, salary:2300}]
        }
    };

    //useradd组件
    const useradd = {
        template: `<div><br> 姓名：<input type="text"> <br> 年龄：<input type="text"> <br> 工资：<input type="text"> <br> <input type="submit" value="提交"></div>`
    }

    //useredit修改组件
    const useredit = {
        template: `<div><br> id：<input type="text" v-model="user.id"> <br> 姓名：<input type="text" v-model="user.name"> <br> 年龄：<input type="text" v-model="user.age"> <br> 工资：<input type="text" v-model="user.salary"> <br> <input type="button" @click="edituser" value="提交"></div>`,
        data(){
            return{
                user:{}
            }
        },
        methods: {
            edituser(){
                //发送axios请求更新用户
                // axios.post("url", this.user).then(res=>{
                //     this.user = {};//清空表格数据
                //     this.$router.push({name:'users'});//切换路由
                // });
                this.$router.push({name:'Users'});
            }
        },
        created() {
            console.log(this.$route.query.id);
            this.user.id = this.$route.query.id;
            this.user.name = this.$route.query.name;
            this.user.age = this.$route.query.age;
            this.user.salary = this.$route.query.salary;
        }
    }

    const router = new VueRouter({
        routes:[
            {
                path:'/users', name:'Users', component:users,
                children:[//嵌套子组件路由 注意：嵌套路由中子路由不能使用/开头  访问子路由  /users/useradd
                    {path: 'useradd', name:'useradd', component: useradd},
                    {path: 'useredit', name: 'useredit', component: useredit}
                ]
            },
        ]
    });

    const app = new Vue({
        el: "#app",
        data:{},
        methods:{},
        components:{
            users
        },
        router:router
    });
</script>
posted @ 2021-09-27 15:42  不是孩子了  阅读(120)  评论(0)    收藏  举报