Vue—router-view组件使用方法

开发的时候有时候会遇到一种情况，
比如 ：点击这个链接跳转到其他组件的情况，通常会跳转到新的页面，但是，我们不想跳转到新页面，只在当前页面切换着显示，那么就要涉及到路由的嵌套了，也可以说是子路由的使用。

router-view可以嵌入一个组件，组件内部又可以写router-view嵌入组件，因此可以通过router-view实现组件嵌组件；

以饿了么订餐的情景来说吧，在同个页面，切换显示不同组件的相应内容，同时地址栏的地址是会变的

怎么实现它呢？

首先 我们在导航组件navbar.vue中写了三个导航链接，他们对应地址分别为：/food,/rating,/seller,点击每个导航链接会跳转到不同的组件，并且加上这个标签

navbar.vue：

然后，我们在index.vue引入navbar.vue：

index.vue：

最后，路由都是怎么配的呢，在index.js中：

{
      path: '/',
      name: 'index',
      component: index,
      redirect:'/food',
      children: [
    	{
	      path: 'food',
	      name: 'food',
	      component: food
	    },
	    {
	      path: 'seller',
	      name: 'seller',
	      component: seller
	    },
	    {
	      path: 'rating',
	      name: 'rating',
	      component: rating
	    }
 	  ]
}