按我自己的理解来说,嵌套路由就是在定义的路由里嵌套子路由,而子路由有自己的组件和路径。子路由的视图显示在他的父路由组件中
今天自己做的这个简单的例子里就用到了嵌套路由的做法
路由配置: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"> </el-col>
<el-col :span="12"> </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>