vue+element 学习之路（七）嵌套路由，控制路由地址

按我自己的理解来说，嵌套路由就是在定义的路由里嵌套子路由，而子路由有自己的组件和路径。子路由的视图显示在他的父路由组件中

今天自己做的这个简单的例子里就用到了嵌套路由的做法

路由配置：router.js

文件夹路径，画个图方便理解

而两个组件login.vue和register.vue的内容都将在index.vue中的《router-view》《/router-view》显示

在这里还有一种路由视图跳转的方式：

<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>

而本人本次选择了使用router.push的方式进行跳转

index.vue源码

<template>
    <el-row style="margin-top:170px;">
        <el-col :span="4">&nbsp;</el-col>
        <el-col :span="12">&nbsp;</el-col>
        <el-col :span="6">

            <el-tabs type="border-card" stretch  v-model="activeName" @tab-click="paneClick">
                <el-tab-pane name="login">
                    <span slot="label">
                        登录
                    </span>
                    <router-view></router-view>
                </el-tab-pane>
                <el-tab-pane name="register">
                    <span slot="label">
                        注册
                    </span>
                    <router-view></router-view>
                </el-tab-pane>
            </el-tabs>
        </el-col>
        <el-col :span="2"></el-col>
    </el-row>
</template>


<script>
export default {
    data(){
        return{
            activeName:'login'
        }
    },
    created:function(){
        //获取当前路由的名字，给activeName提供指向
        this.activeName = this.$route.name;

    },
    methods:{
        paneClick(tab,event){
            if(this.activeName === 'login'){
                this.$router.push({path:'/user/login'})
            }else{
                this.$router.push({path:'/user/register'})
            }
        }
    }
}
</script>

<style>

</style>

细讲一下几个地方，为什么要给activeName赋值为路由定义的名字，因为我选用的是标签页的点击事件进行路由跳转router.push，而不是《router-link》，当页面刷新是，activeName会给标签页的导航起到正确指定作用，具体看官方参数说明：https://element.eleme.io/#/zh-CN/component/tabs

login.vue

<template>
    <div>
        <!-- <el-button @click="addUserId()">添加store.userId</el-button> -->
        <el-form>
            <el-form-item>
                <el-input placeholder="登录名">

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="密码">

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-checkbox label="记住我"></el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%">登录</el-button>
            </el-form-item>
            <el-row style="font-size:12px;text-align:center">
                同意相关<a href="#">《注册协议》</a>和<a href="#">《隐私条款》</a>
            </el-row>
        </el-form>
    </div>
</template>


<script>
export default {
    methods:{
        addUserId(){
            this.$store.commit('setUserId','test')
        }
    }
}
</script>

register.vue

<template>
    <div>
        <el-form>
            <el-form-item>
                <el-input placeholder="请输入手机号码">

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-row :gutter="5">
                    <el-col :span="16">
                         <el-input placeholder="验证码">

                        </el-input>
                    </el-col>
                    <el-col :span="7">
                        <el-button>获取验证码</el-button>
                    </el-col>
                    <el-col :span="1"></el-col>
                </el-row>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入登录密码（最少六位，字母、数字）" show-password>

                </el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width:100%">同意条款并注册</el-button>
            </el-form-item>
            <el-row style="font-size:12px;text-align:center">
                阅读<a href="#">《注册协议》</a>和<a href="#">《隐私条款》</a>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export default {
    
}
</script>