Vue入坑——vue-router配置子路由

上一篇：vue-router路由入门

一块儿学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

在上一篇，咱们学习了vue路由的配置与跳转，这篇来学习一下vue的子路由配置。

需求

在路由里，写两个子路由

建立子路由

一、新建两个组件

这两个组件咱们一下子把他们加在mycenter中去

二、编写myinfo.vue和myjob.vue

myinfo.vue

<template>
  <div>
    <p>{{myinfo}}</p>
  </div>
</template>
<script>
  export default{
    name:myinfo,
    data(){
      return {
        myinfo:'i am myinfo.vue page'
      }
    }
  }
</script>
<style scoped>
  p{color: rgb(72, 232, 24);}
</style>

myjob.vue
<template>
  <div>
    <p>{{myjob}}</p>
  </div>
</template>
<script>
  export default{
    name:myjob,
    data(){
      return {
      myjob:'my job is web engineer,i am study vue.js now!'
    }
    }
  }
</script>
<style scoped>
  p{color: rgb(222, 145, 55);}
</style>

三、引入和配置

在index.js里面

四、加入<router-view>标签

在mycenter.vue中添加<router-view>标签，给子模块提供插入位置

五、实现导航

在App.vue中添加连接

如今运行

结语

完成这篇博客的学习以后，就大概清楚路由之间的跳转了，还有新建一个路由或者子路由须要怎么进行配置。

 

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                    下一篇：vue-router如何传递参数