Vue＜router-view＞＜/router-view＞学习心得

今天看到个Vue项目结构中使用到了<router-view></router-view>，于是了解学习了用法。
首先来看router下的index.js

export default new Router({
  mode: 'history',
  routes: [
    {
    //首页跳转到/homepage
    path: '/',
    redirect:'/homepage',
    name:'zhuye'
    },
    {
    //这是homepage页面的说明，说明使用的页面是homepage。其子页面是list和article。
    //children的说明是list和aritcle这两个页面会因为点击事件替换页面。
      path: '/homepage',
      name: 'homepage',
      component: homepage,
      //默认是使用list的子页面，而不是article。
      redirect:'/list',
      children: [
        {
          path: '/list',
          name: 'list',
          component: list  
        } ,    
        {
           path: '/articel/:id',
           name: 'articel',
           component: article, 
         }
      ]
     },
 
  ],

在homepage页面下

      <div class="left">
      	<!--会被替换的界面位置-->
        <router-view></router-view>
      </div>
     <!--点击后，前面的router-view会被替换成list组件的界面--> 
     <router-link  class="series-a" exact-active-class="series" :to="{path:'/list',query:{seriesid:item.id}}"><i class="iconfont">&#xe644;</i>&ensp;{{item.special_column}}</router-link>

接下来看list页面

    <!--此时在list界面点击后，homepage下的router-view的位置的界面会替换成article的界面-->
      <router-link tag="div" :to="'/articel/'+item.id" v-for="item in  articlelist" :key="item.id" class="post-content">
     </router-link>

最后是App.vue

      <div class="main">
        <router-view></router-view>
      </div>

路由跳转展示的页面会在main下显示。即/homepage等页面形成的页面都必须依赖于App.vue下的router-view,它是所有router-view（路由界面）的父组件。如果在App.vue下不添加router-view，那么router跳转界面无显示内容。