vue 路由的嵌套

vue 路由的嵌套

实现目标：将商品添加的组件add，嵌套在商品列表products中。

1.外层组件 商品列表

const products = {
        template: "#productsTemplate",
        methods: {
            editData: function(val) {
                this.$router.push({
                    name: 'edit',
                    query: val //通过query传值 在切换页面的时候将值传过去
                }, )
            }
        }

    };

2.嵌套组件 商品添加的组件

const add = {
        template: `<div>商品添加form <br>
            <input type="text">
            </div>
        `
    }

3.嵌套的实现

在products的路由规则中，添加children属性，将add组件的路由规则添加在products组件的children属性中。add的地址不能加 /。add路由的路径为 /products/add

const router = new VueRouter({
        routes: [{
            path: '/',
            redirect: '/products' //打开就是用户管理界面
        }, {
            path: '/products',
            component: products,
            name: 'products',
            children: [{
                path: 'add',
                component: add,
                name: 'add',
            }, {
                path: 'edit',
                component: edit,
                name: 'edit',
            }]
        }, ]
    });