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

原创
2018/05/10 22:11
阅读数 2.3W

上一篇: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如何传递参数

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部