Vue之vue router进阶

在vue路由中，路由也分几个种类

• 普通路由
• 默认路由
• 嵌套路由

在之前的vue路由入门中所讲的便是普通路由 ，接下来我将继续探讨其他路由

一、默认路由

在Vue中，路由组件需要通过router-link进行加载，如果在不手动点击router-link的前提下访问路由组件，那么需要设置被访问的路由组件为默认路由

代码实例HTML

<div id="app">

    <router-link to="/register">注册</router-link>
    <router-link to="/login">登录</router-link>

    <router-view></router-view>
</div>

<template id="registerId">
    <h1>这是注册页面</h1>
</template>

<template id="loginId">
    <h1>这是登录页面</h1>
</template>

JavaScript

<script>

    let RegisterComponent = {
        template:"#registerId"
    }

    let LoginComponent = {
        template: "#loginId"
    }

    let router = new VueRouter({
        routes:[
            {
                name:"register",
                path:"/register",
                component:RegisterComponent
            },
            {
                name:"login",
                path:"/login",
                component: LoginComponent
            },
            {
                //配置默认路由
                path:"/",  //路由地址
                redirect:"/login" //重定向
            }
        ]
    });

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

</script>

在设置默认路由的时候，假如现在只有登录和注册页面，我们想默认到登录页面

首先我们还是需要登录和注册页面的路由

其次设置默认路由，在默认路由中path为/（因为路由的默认地址为/），redirect为路由的重定向（意思是，可以重新设置路由地址，设置成你想要的路径）

---

二、嵌套路由

嵌套路由本质就是路由之间相互嵌套

 代码案例

HTML

<div id="app">
<router-link to="/login">登录</router-link>
<router-link to="/res">注册</router-link>
    <router-view></router-view>
</div>
<template id="login">
    <div>
        <h1>登录</h1>
    </div>
</template>
<template id="res">
    <div>
        <h1>注册</h1>
        <router-link to="/phone">手机号</router-link>
        <router-link to="/email">邮箱</router-link>
        <router-view></router-view>

    </div>
</template>
<template id="phone">
    <div>
        <h1>手机号注册</h1>
    </div>
</template>
<template id="email">
    <div>
        <h1>邮箱注册</h1>
    </div>
</template>

JavaScript

<script>
    let Login = {
        template:'#login'
    }
    let Res = {
        template:'#res'
    }
    let Phone = {
        template:'#phone'
    }
    let Email = {
        template:'#email'
    }
    let router = new VueRouter({
        routes:[{
            path:'/login',
            component:Login
        },{
            path:'/res',
            component:Res,
            //嵌套路由
            //其实就是在主路由里面添加一个children对象数组
            //把子路由写进去
            children:[{
                path:'/phone',
                component:Phone
            },{
                path:'/email',
                component:Email
            },]
        },]
    })
    new Vue({
        el:'#app',
        router
    })
</script>

注意:嵌套路由多用在，左侧导航栏，点击左侧导航栏，在右边出现相对应的页面，然后再右面页面点击商品，出现相对应商品的信息