Vue默认路由

当我们打开网页时，需要默认展示一个页面，在Vue里，目前了解到的两种设置默认路由的方法

先看一下页面结构：

<-- 负责展示的容器-->

 注册
    登录
    


<-- 注册组件-->

<-- 登录组件-->

下面是第一种方法，通过redirect设置，当页面加载时，访问路径为"/"，而redirect为该路径重新指定一个方向，会根据redirect指定的方向去寻找对应的路由，加载对应的模块，从而实现默认路由的方法，下面是具体代码：

    let RegisterComponent = {
        template:"#registerId"
    }

    let LoginComponent = {
        template: "#loginId"
    }
//创建路由
    const router = new VueRouter({
        routes:[
            {
                name:"register",
                path:"/register",
                component:RegisterComponent
            },
            {
                name:"login",
                path:"/login",
                component: LoginComponent
            },
            { // 配置默认路由
                path:"/", // 路由地址
                redirect:"/login" // 重定向
            }
        ]
    });
//创建vm
    new Vue({
        el:"#app",
        router
    });

还有一种方法，访问"/"时，直接加载对应的组件，以实现默认路由的效果，集体参考一下代码：

    let RegisterComponent = {
        template:"#registerId"
    }

    let LoginComponent = {
        template: "#loginId"
    }

    const router = new VueRouter({
        routes:[
            {
                name:"register",
                path:"/register",
                component:RegisterComponent
            },
            {
                name:"login",
                path:"/login",
                component: LoginComponent
            },
            { // 配置默认路由
                path:"/", // 路由地址
                component: LoginComponent//访问根时直接加载组件
            }
        ]
    });

    new Vue({
        el:"#app",
        router
    });