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如何傳遞參數