router-view 使用

最近用vue写网页，竟然忘了router-view 的使用，时间太久了，还是记录下。

<router-view /> 是一个组件，它与router中的path相关联。可以通过router进而改变<router-view>代表的具体vue页面。

比如在'/Root'对应的页面中使用<router-view>，就需要在router.js中配置Root下 children[] 形成层级关系。

该页面使用 <menu/>对下面<router-view>进行控制。

router的.js: 

 {
      path: '/dosomething',
      name: 'Dosomething',
      component: Dosomething,
       children:[{
        path:'/dosomething/book',
        name:'book',
        component:Book
      },{
        path:'/dosomething/sport',
        name:'sport',
        component:Sport
      },{
        path:'/dosomething/plan',
        name:'plan',
        component:Plan
      },{
        path:'/dosomething/tools',
        name: 'tools',
        component: Tools
      }
      ]

    }

menu标签

@on-select="selectMenu"

方法

selectMenu(name) {

this.$router.push(name)

}

从而实现页面内的二级跳转