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

2019独角兽企业重金招聘Python工程师标准>>>

上一篇：vue-router路由入门

一起学vue——vue学习总路线

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

前言

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

需求

在路由里，写两个子路由

创建子路由

1、新建两个组件

这两个组件我们一会儿把他们加在mycenter中去

2、编写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>

3、引入和配置

在index.js里面

4、加入<router-view>标签

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

5、实现导航

在App.vue中添加链接

现在运行

结语

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

 

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

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

转载于:https://my.oschina.net/u/3802541/blog/1810475