Vue路由中的子路由学习

1、创建一个首页组件，并通过路由在根实例中显示：

2、创建另外两个子组件

    
    


    //子组件1
    var son1 = {
        template:'#son1'
    };
    //子组件2
    var son2 = {
        template:'#son2'
    };

3、给首页组件添加这两个子组件，首先要在首页组件中添加router-link，使其能指向子组件，然后在路由规则中首页的路由规则中添加children属性，并配置两个子组件的路由规则，最后要在首页组件模版中添加router-view来展示两个子组件的内容

注

子组件的内容要在父组件中的router-view中展示

    


    var router = new VueRouter({
        routes:[
            {
                path:'/',
                component:home,
                children:[
                    {
                        path:'/son1',
                        component:son1
                    },
                    {
                        path:'/son2',
                        component:son2
                    }
                ]
            }
        ]
    });

路由当中的回退

可以在组件当中添加a标签：

//.prevent修饰可以阻止a标签本身的跳转刷新
回退

然后在对应的组件中添加方法：

        methods:{
            goBack(){
                this.$router.back(-1)
            }
        }

默认路由

当所有的路由规则都不匹配时，可以添加一个默认路由(配置404页面)：

    //定义一个页面找不到的组件
    var notFound = {
        template:'
该页面找不到了。。。
'
    };



            {
                path:'*',
                component:notFound
            }