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

今天看到个Vue项目结构中使用到了，于是了解学习了用法。
首先来看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-link  class="series-a" exact-active-class="series" :to="{path:'/list',query:{seriesid:item.id}}"><i class="iconfont">i> {{item.special_column}}router-link>

接下来看list页面

    
      <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跳转界面无显示内容。